jQuery UI Autocomplete: Load from Array of Objects: Filtering is broken

Question

I'm following the JSFiddle given in this thread as the solution to loading jQuery UI AutoComplete from a simple Array of Objects:

http://jsfiddle.net/khsbme4k/

The filtering is broken here. There are 2 data rows with a First_Name string, "Will" and "Willem", but if you type anything else e.g. "WA" you still get the full selection of 2 items, where there should be none.

  var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];

$('#search').autocomplete({
        // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
        minLength: 2,
source: function (request, response) {
           response($.map(data, function (value, key) {
                return {
                    label: value.first_name,
                    value: value.id
                }
            }));

    },    
        focus: function(event, ui) {
            $('#search').val(ui.item.first_name);
            return false;
        },
        // Once a value in the drop down list is selected, do the following:
        select: function(event, ui) {
            // place the person.given_name value into the textfield called 'select_origin'...
            $('#search').val(ui.item.first_name);
            // and place the person.id into the hidden textfield called 'link_origin_id'. 
            $('#link_origin_id').val(ui.item.id);
                return false;
        }

You need to pass the map data back to filtering. Use $.ui.autocomplete.filter() Example: jqueryui.com/autocomplete/#multiple — Twisty
– Twisty, Commented May 26, 2019 at 18:58

Twisty · Accepted Answer · 2019-05-26 19:07:29Z

2

Consider the following code example of your source:

source: function(request, response) {
  var results;
  var aData = $.map(data, function(value, key) {
    return {
      label: value.first_name,
      value: value.id
    }
  });
  results = $.ui.autocomplete.filter(aData, request.term);
  response(results);
}

First we map your data to { label, value } pairs that Autocomplete is expecting. We then use $.ui.autocomplete.filter() to perform the expected filtering like Autocomplete does. This gives us our results array that we can send to response() to display.

Working example: https://jsfiddle.net/Twisty/svnbw2uj/3/

Hope that helps.

answered May 26, 2019 at 19:07

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shivendra Singh · Accepted Answer · 2019-05-28 01:01:55Z

1

Use the indexOf() method to get the autocomplete list of search item.

     $(function() {
    var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];

var auto_array = {};
$('#search').autocomplete({
	// This shows the min length of charcters that must be typed before the autocomplete looks for a match.
	minLength: 2,
source: function (request, response) {
	   response($.map(data, function (value, key) {
	   
			//get the list of autocomplete start with search value. for case insensitive i used the toUpperCase() function.
			var first_name = value.first_name.toUpperCase()
			if(first_name.indexOf(request.term.toUpperCase()) != -1){
				label = value.first_name;
				auto_array[label] = value.id;
				return label;
			}else{
				return null;
			}
		}));

},    
	
	 select: function(event, ui) {
	 $('#link_origin_id').val(auto_array[ui.item.value]);
	  }
					
});
});

 
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <input type="text" id="search">
	<input type="text" id="link_origin_id">

edited May 28, 2019 at 1:01

answered May 25, 2019 at 19:08

Shivendra Singh

2,9731 gold badge13 silver badges11 bronze badges

3 Comments

Shivendra Singh Over a year ago

@gene, try this code it will work. Before display the autocomplete list I used startsWith() function.

gene b. Over a year ago

thanks a lot! only problems is "startsWith" which maybe should be "indexOf != -1"

Shivendra Singh Over a year ago

yes, batter to use indexOf. I edit my code. Thanks!

Collectives™ on Stack Overflow

jQuery UI Autocomplete: Load from Array of Objects: Filtering is broken

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related