It is necessary that when typing characters in the input, knocked out the search results for the json array, in this very input. For this, I used the library "ui.autocomplete". But something does not work, I can not understand the reason. Who has already worked with this library, tell me what is wrong.

Below I present my script to illustrate the problem:

<input type="text" id="myinput"> $("#myinput").autocomplete({ minLength: 0, source: projects, focus: function(event, ui) { $("#myinput").val(ui.item.data.allBrand); return false; }, select: function(event, ui) { $("#myinput").val(ui.item.data.allBrand); $("#myinput-id").val(ui.item.data.allBrand); $("#myinput-description").html(ui.item.data.allBrand); $("#myinput-icon").fadeOut('slow', function() { $(this).attr("src", "images/" + ui.item.icon).fadeIn('slow'); }); return false; } }) .data("autocomplete")._renderItem = function(ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "<br>" + item.desc + "</a>") .appendTo(ul); }; })

Here is the version with the library connected: http://jsfiddle.net/t52ka/39/

  • one
    Use the editor with syntax highlighting. They greatly help to see problems with brackets. You can also use automatic code formatting utilities or services, for example for JavaScript: jsbeautifier.org - tutankhamun

1 answer 1

The reasons are pretty simple.

  1. You already incorrectly make the second time the description of your projects of an object for autofilling. Arrange the brackets normally and make sure that it is in the desired field of view.
  2. Depending on the version, you should use not .data( "autocomplete" ) , but .data( "ui-autocomplete" ) .

For example:

<input id="myinput" type="text">

 $(function(){ var projects = [ { name: "rosdestvenskaya istoriya"}, { name: "sreck"}, { name: "lednikoviy period"}, { name: "simsoni"}, { name: "sauth parck"}, { name: "rapuncel"} ]; //************************************************************************* $("#myinput").autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#myinput" ).val( ui.item.name ); return false; }, select: function( event, ui ) { $( "#myinput" ).val( ui.item.name ); return false; } }).data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.name + "<br>" + item.name + "</a>" ) .appendTo( ul ); }; });