Jquery autocomplete from json data

Question

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/

Do you need to use the function variant? If the list of options is fixed (as countries is) then the easiest solution is to update your list so it's simply an array of strings, then use source:myData rather than the function. the autocomplete UI will take care of the rest — GPW
– GPW, Commented Dec 6, 2017 at 10:15
can u please tell me which line i need to change to get the code working. — Thomas
– Thomas, Commented Dec 6, 2017 at 10:16
that said, I think the actual source of your error is that results.push(v) should be results.push(v.name) — GPW
– GPW, Commented Dec 6, 2017 at 10:16
@GPW thanks a lot your hint solve my problem jsfiddle.net/urtkxo46/3 — Thomas
– Thomas, Commented Dec 6, 2017 at 10:25
i use if (v.name.indexOf(req.term) != -1) it search any character but i want to search input char start with. how to do it with js? — Thomas
– Thomas, Commented Dec 6, 2017 at 10:26

Durga · Accepted Answer · 2017-12-06 10:33:20Z

1

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" />

edited Dec 6, 2017 at 10:33

answered Dec 6, 2017 at 10:21

Durga

15.6k2 gold badges31 silver badges55 bronze badges

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

8 Comments

StudioTime Over a year ago

Code only answers can get downvoted... you should add an explanation

Thomas Over a year ago

i use if (v.name.indexOf(req.term) != -1) it search any character but i want to search input char start with. how to do it with js?

Durga Over a year ago

@Thomas That's why I am converting to lowercase. Check the snippet.

Durga Over a year ago

@Thomas do you need input character at first position only?

Thomas Over a year ago

suppose when i type b then country name start with C is coming which i do not want. i test this if (v.name.toLowerCase().indexOf(req.term.toLowerCase()) != -1) { but did not work. still when i search with B then country name start with C is coming which is wrong.

|

GPW · Accepted Answer · 2017-12-06 10:19:48Z

0

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.

answered Dec 6, 2017 at 10:19

GPW

2,6362 gold badges14 silver badges22 bronze badges

2 Comments

Thomas Over a year ago

i use if (v.name.indexOf(req.term) != -1) it search any character but i want to search input char start with. how to do it with js?

GPW Over a year ago

can't you just use v.name.indexOf(req.term) === 0) ? that'll only be true if it matches at the start

Collectives™ on Stack Overflow

Jquery autocomplete from json data

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related