javascript - jquery ui autocomplete with multiple fields -
this code works fine, second input field not show images appearing text suggestions. appreciate if take , let me know needs changed in js work.
example queries: clinton, bush
you can see script here http://predcast.com/include/autoc/jqui/test2.php
<!doctype html> <html> <head> <title>jquery ui autocomplete: custom html in dropdown</title> <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <style> .loading { display: none; width: 16px; height: 16px; background-image: url(/img/loading.gif); vertical-align: text-bottom; } #autocomplete.ui-autocomplete-loading ~ .loading { display: inline-block; } .ui-menu-item { padding:1px; margin:1px; } .ac-m { height:block; overflow:auto; padding:2px 2px 2px 2px; } .ac-img { max-width:30px; float:left; margin:2px 2px 2px 2px; } .ac-title { margin:1px; font-size:14px; } .ui-autocomplete { margin:1px; } </style> </head> <body> <form action="http://www.test.com/"> <input class="autocomplete" type="text" placeholder="option 1" name="e1"> <input class="autocomplete" type="text" placeholder="option 2" name="e2"> <span class="loading"></span> </form> <script> /* * jquery ui autocomplete: custom html in dropdown * http://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html */ $(function () { $('.autocomplete').autocomplete({ delay: 500, minlength: 3, source: function (request, response) { $.getjson("http://predcast.com/include/autoc/jqui/jsond.php", { q: request.term, }, function (data) { var array = data.error ? [] : $.map(data.movies, function (m) { return { label: m.title, year: m.year, img: m.img, }; }); response(array); }); }, focus: function (event, ui) { event.preventdefault(); }, }).data("ui-autocomplete")._renderitem = function (ul, item) { var $a = $("<div class='ac-m'></div>"); if (item.img) { $("<span></span>").addclass(item.icon).appendto($a).append("<img src='" + item.img + "' border='0' class='ac-img' />"); } $("<span class='ac-title'></span>").text(item.label).appendto($a); return $("<li></li>").append($a).appendto(ul); }; }); </script> </body> </html>
the problem related way defining _renderitem extension point.
in code, redefining jquery-ui autocomplete _renderitem function first widget instance, _renderitem second autocomplete instance default 1 defined in jquery-ui code.
you initializating autocomplete 2 inputs $('.autocomplete').autocomplete({ ...}) first widget instance instruction .data("ui-autocomplete") , redefine _renderitem function instance only.
you can define instances this:
// create widget instances $('.autocomplete').autocomplete({ delay: 500, minlength: 3, source: function (request, response) { $.getjson("http://predcast.com/include/autoc/jqui/jsond.php", { q: request.term, }, function (data) { var array = data.error ? [] : $.map(data.movies, function (m) { return { label: m.title, year: m.year, img: m.img, }; }); response(array); }); }, focus: function (event, ui) { event.preventdefault(); } }); // redefine _renderitem each instance $('.autocomplete').each(function() { $(this).data('ui-autocomplete')._renderitem = function (ul, item) { var $a = $("<div class='ac-m'></div>"); if (item.img) { $("<span></span>").addclass(item.icon).appendto($a).append("<img src='" + item.img + "' border='0' class='ac-img' />"); } $("<span class='ac-title'></span>").text(item.label).appendto($a); return $("<li></li>").append($a).appendto(ul); }; });
Comments
Post a Comment