Good day. Tell me who knows how to autocomplete on the site? To implement a search for autocompet cities or airports, use a query of the following form:

http://autocomplete.travelpayouts.com/jravia?locale=ru&with_countries=false&q=Mos&callback=function

where q is the main parameter, is set as text; locale is the output language; with_countries - used if autocomplete is created for a country (false - the answer does not contain information about the country, true - the answer contains information about the country); callback - the name of the function in which the answer is returned.

Sample answer:

[ { "_id":"4eda5f858792904be4001433", "coordinates":{ "lon":37.617633, "lat":55.755786 }, "city_fullname":"Москва, Россия", "city_code":"MOW", "name":null, "_type":"city", "_score":67.74186, "city_name":"Москва", "title":"Москва", "country_code":"RU", "country_name":"Россия", "code":"MOW" }, { "_id":"4eda61628792904be4003b20", "coordinates":{ "lon":43.149445, "lat":36.3075 }, "city_fullname":"Мосул, Ирак", "city_code":"OSM", "name":"Мосул", "_type":"airport", "_score":26.681381, "city_name":"Мосул", "title":"Мосул", "country_code":"IQ", "country_name":"Ирак", "code":"OSM" }]

Here is a sample code as I try to do:

  <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <meta charset="utf-8"> </head> <body> <script> $(document).ready(function(){ $( "#test" ).autocomplete({ source: function(request, response){ $.ajax({ url: "http://autocomplete.travelpayouts.com/jravia?locale=ru&with_countries=false&callback=function", dataType: "jsonp", data:{ q: request.term }, success: function(data){ response($.map(data, function(item){ alert(data); })); } }); }, minLength: 2 }); }); </script> <input id="test"> </body> </html>

Thanks in advance.

  • Welcome to stackoverflow! - AK ♦
  • one
    add your markup code to the question (edit button) and show what code you wrote to autocomplete - AK ♦
  • Why is it written in your question that the main parameter is q , and in the code you pass d ? - teran
  • and in the example of the answer you just have an array, and in the code you are processing data.geonames - teran
  • I did a launch version check out - L. Vadim

1 answer 1

Here is the working version

  $(document).ready(function(){ $( "#test" ).autocomplete({ source: function(request, response){ $.ajax({ url: 'http://autocomplete.travelpayouts.com/jravia?locale=ru&with_countries=false', data:{ q: request.term }, dataType: "jsonp", jsonpCallback: 'callback', success: function(data) { response($.map(data, function(v,i){ var name = v.name || " "; var text = v.city_fullname + ', ' + name ; return text; })); } }); }, minLength: 2 }); }); 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <input id="test" />

  • Thank you for the working version. There I just had to correct: remove the q parameter from the link and add the data to the script: {q: request.term}, - Andrei Ulanov
  • Good day. Can you please tell me why I can’t autocomplete in the same way using another link ( engine.hotellook.com/api/v2/… ) - Andrey Ulanov
  • open a new question, write what it is json and not jsonp, I will answer it. Paste this code as an example - L. Vadim