CODEWITHSUNDEEP
javascriptjquery
JCB
JCB

Reputation: 167

How do I get jQuery UI autocomplete to ignore punctuation, yet display it?

I am trying to get the jQuery UI autocomplete to ignore punctuation. I currently have an array of objects stored in availableTags that looks like : 

 [{'label':'AA RS20.0-4', 'value':'AA RS2004'},
 {'label':'AA AF-20.0-5', 'value': 'AA AF2005'},
 {'label':'ALL 2000 SERIES', 'value':'ALL 2000 SERIES'},
 {'label':'ALL 2000MH', 'value':'ALL 2000MH'}]

Basically, I need to have the autocomplete filter by the value stored in value, but display the value stored in label.
My issue comes in when I type in "200". Ideally, all results should display.

My current code: 

$('#entermod').autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term.replace(/[^a-zA-Z0-9\s]/, ""));
        console.log(results);
        response(results.slice(0, 10));},           
    minLength : 3
}).data('ui-autocomplete')._renderItem = function(ul, item) {
    return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "</a>" )
            .appendTo( ul );
};

What do I need to change to get this to work? Or do I need to take a completely different approach to this situation?

Upvotes: 2

Views: 647

Answers (1)

j809
j809

Reputation: 1499

First, of all your above code seems to have errors.

  1. It doesn't complete ' and }.
  2. You are going to use jquery autocomplete which takes source as:

Array: An array can be used for local data. There are two supported formats: An array of strings: [ "Choice1", "Choice2" ] An array of objects with label and value properties:
[ { label: "Choice1", value: "value1" }, ... ]

Here the label is used as key and options displayed are values.

So, in your code where I think label and value are interchanged, only two labels get matched with the filter.

So, here is your corrected code:

JS

var availableTags = 
[{'value':'AA RS20.0-4', 'label':'AA RS2004'},
 {'value':'AA AF-20.0-5', 'label': 'AA AF2005'},
 {'value':'ALL 2000 SERIES', 'label':'ALL 2000 SERIES'},
 {'value':'ALL 2000MH', 'label':'ALL 2000MH'}] ;

$('#entermod').autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term.replace(/[^a-zA-Z0-9\s]/, ""));
        console.log(results);
        response(results.slice(0, 10));
    },           
    minLength : 3
}).data('ui-autocomplete')._renderItem = function(ul, item) {
    return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.value + "</a>" )
            .appendTo( ul );
    }

Take a look here and check if its working:

DEMO

Upvotes: 2

Related Questions