CODEWITHSUNDEEP
jquery
Thomas
Thomas

Reputation: 34188

Jquery autocomplete from json data

i have country related data stored as json. i want to show country name from that json array. i use jquery autocomplete. this is my code which i tried but not working. give me some hint that where is the mistake.

<input type="text" class="form-control" id="plugins" name="plugins" />

var myData =[
    {"name": "Afghanistan"},
    {"name": "Åland Islands"},
    {"name": "Albania"},
    {"name": "Algeria"},
    {"name": "American Samoa"},
    {"name": "Bahamas"},
    {"name": "Bahrain"},
    {"name": "Bangladesh"},
    {"name": "Barbados"},
    {"name": "Belarus"},
    {"name": "Belgium"},
    {"name": "Belize"},
    {"name": "Benin"},
    {"name": "Cambodia"},
    {"name": "Cameroon"},
    {"name": "Canada"},
    {"name": "Cape Verde"},
    {"name": "Cayman Islands"},
    {"name": "Viet Nam"},
    {"name": "Virgin Islands, British"},
    {"name": "Virgin Islands, U.S."},
    {"name": "Wallis and Futuna"},
    {"name": "Western Sahara"},
    {"name": "Yemen"},
    {"name": "Zambia"},
    {"name": "Zimbabwe"}
]

$(function() {
  $("#plugins").autocomplete({
    source: function(req, resp) {
      var results = [];
      $.each(myData, function(k, v) {
        // Make a pass for names
        if (v.name.indexOf(req.term) != -1) {
          results.push(v);
          return;
        }
      });
      resp(results);
    }
  });
});

here is jsfiddle version https://jsfiddle.net/urtkxo46/2/

this is working version of jsfiddle https://jsfiddle.net/durga598/urtkxo46/5/

Upvotes: 0

Views: 393

Answers (2)

Durga
Durga

Reputation: 15604

In your result array you need to push results.push(v.name); to match case insensitive use toLowerCase() , so it will match all the values properly. You need to use source an array or string or a function returns object with key: label and value .

/*var myData = [{
  label: "xxx",
  value: "9997515744"
}, {
  label: "abc",
  value: "9619054073"
}, {
  label: "asd",
  value: "9323135708"
}];*/

var myData =[
	{"name": "Afghanistan"},
	{"name": "Åland Islands"},
	{"name": "Albania"},
	{"name": "Algeria"},
	{"name": "American Samoa"},
	{"name": "Bahamas"},
	{"name": "Bahrain"},
	{"name": "Bangladesh"},
	{"name": "Barbados"},
	{"name": "Belarus"},
	{"name": "Belgium"},
	{"name": "Belize"},
	{"name": "Benin"},
	{"name": "Cambodia"},
	{"name": "Cameroon"},
	{"name": "Canada"},
	{"name": "Cape Verde"},
	{"name": "Cayman Islands"},
	{"name": "Viet Nam"},
	{"name": "Virgin Islands, British"},
	{"name": "Virgin Islands, U.S."},
	{"name": "Wallis and Futuna"},
	{"name": "Western Sahara"},
	{"name": "Yemen"},
	{"name": "Zambia"},
	{"name": "Zimbabwe"}
]

$(function() {
  $("#plugins").autocomplete({
    source: function(req, resp) {
      var results = [];
      $.each(myData, function(k, v) {
        if (v.name.toLowerCase().startsWith(req.term.toLowerCase())) {
          results.push(v.name);
          return;
        }
      });
      //console.log(results)
      resp(results);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" class="form-control" id="plugins" name="plugins" />

Upvotes: 1

GPW
GPW

Reputation: 2626

According to the docs: [http://api.jqueryui.com/autocomplete/]

The result of the response function needs to be an array of strings, or an array of objects with label and value properties. You're returning an array of objects with a "name" property.

results.push(v) should be results.push(v.name) and then it'll be an array of strings so should work.

Upvotes: 0

Related Questions