autocomplete does not work the only result that I achieved is getting NO search results .

Spent 2 days.

I use standard jQuery.autocomplete .

I feel that I am mistaken somewhere from the beginning of the narrative source .

Please, who has a ready-made solution, show this code, if I need to pull data from the database, the autocomplete works from the local array with variables, but this is not what I need. Thank.

  • one
    code do not want to bring in your question? or should we know what is written there? What and how and where is the request sent? - Vasily Barbashev
  • Vasily, I don’t see the point. I don’t have anything interesting in my code, I have data on php after the request, I encode this data into json format, and actually at this stage I understand that I need to work with jquery, I’ll help you with a simple example because I spent 3 days I did not find an example on the Internet, but I would find a manual here I would not ask questions, but on the contrary I would answer, thank you for your understanding - Ilenya
  • jqueryui.com/autocomplete/#remote weird looking, very strange, this is like a tiny example of use. There are plenty of them. - Vasily Barbashev
  • Specific please link, or the code from there to attach here with explanations, thanks! :) - Ilenya
  • There is also a source code . Click, see all the code used for the script. Well and so, now and here I’m going to let down, but it will be an extra copy - paste - Vasily Barbashev

2 answers 2

The data for jQuery.autocomplete taken using this code:

 $(function() { $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, select: function( event, ui ) { } }); });

Where we specify the settings for the plugin, such as:

source - the link from which the data will be returned minLength - the number of characters select - the function called when selecting items in the drop-down list

For example, if the data comes in the form

 [ { value: 'Value1', id: 1 }, { value: 'value2', id: 2 } ]

That data contained in the ui can be called as follows: ui.item.value , ui.item.id

Documentation link

  • Look, instead of search.php, I substitute my own file name, but doesn’t work, what else should I add to register? Because with this code it doesn’t work yet if in php I finally do echo json_encoding ($ myvar) - Ilenya
  • So what that does not work that? What does the server return to you? How do you return it to the server? I can not see anything, you did not throw off the code. - Vasily Barbashev
  • Here's what at the end of php: echo json_encode ($ myvar) I actually wrote it! :) The output is [{"name:" twix "}, {" name: "snikers"} ... And so on, and I turn into jquery I don’t know what to write there, the name of my button is quest a id = searchinDB, what else do you need to provide? - Ilenya
  • How do you not know what to enter in jquery ? Do you receive data from the server? This can be checked in the Network (Chrome) | Network (Firefox) and there to find your query, and see the returned result, if it returns correctly, then write your jquery code. And the format returned must be with an array of value and id objects - Vasily Barbashev
  • That is, I understand correctly instead of value - twix; name - id? Apparently, the problem in the array is that it does not output as the wrong format - Ilenya

So, one of the solutions to the problem (this method only helped me, I describe it):

Used libraries jquery-ui.css, jquery-1.10.2.js, Jquery-ui.js NO header !!!

We have the main file, let it be named - index.php, and the file 200.php in which sql query and connections to the database and the output echo json_encode ($ data) is your variable. Next in index.php, when you click on the button, we include include_once (your_path \ 200.php); enough in body And now the important thing is Ajax autocomplete with URL parameters: '200.php', type: 'post', dataType: 'json', data: { quest: request.term} Next, we only write

 success: function(data) { Response($.map(data,function(item) { return { label: item.label, value: item.value} })); },

And for displaying data from success this is select: function(event,ui) { ui.label; ui.value;} select: function(event,ui) { ui.label; ui.value;} Everything will work, if you have any questions write me together let's analyze