javascript - Not able to select the values of jQuery Autocomplete? -
i trying , experimenting create customized jquery ui autocomplete failing in first step itself. when click on values populate there no response. not able select values of autocomplete. can please let me know why?
below code:
html:
<!doctype html> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <title>test</title> <body> <div>select:</div> <input id="project" style="width:380px;"> </body> javascript:
(function($){ var $project = $('#project'); var projects = [ { value: "test1", label: "test1", desc: "test1", icon: "jquery_32x32.png" }, { value: "test2", label: "test2", desc: "test2", icon: "jqueryui_32x32.png" } ]; $project.autocomplete({ minlength: 0, source: projects, focus: function( event, ui ) { $project.val(ui.item.value); return false; } }).data( "ui-autocomplete" )._renderitem = function( ul, item ) { var inner_html = '<table><tr><td>' + item.value + '</td></tr></table>'; return $("<li></li>") .data("item.autocomplete", item) .append(inner_html) .appendto(ul); }; })(jquery);
you need replace:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> with:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> check following fiddle:
(function($){ var $project = $('#project'); var projects = [ { value: "test1", label: "test1", desc: "test1", icon: "jquery_32x32.png" }, { value: "test2", label: "test2", desc: "test2", icon: "jqueryui_32x32.png" } ]; $project.autocomplete({ minlength: 0, source: projects, focus: function( event, ui ) { $project.val(ui.item.value); return false; } }).data( "ui-autocomplete" )._renderitem = function( ul, item ) { var inner_html = '<table><tr><td>' + item.value + '</td></tr></table>'; return $("<li></li>") .data("item.autocomplete", item) .append(inner_html) .appendto(ul); }; })(jquery);<head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <title>test</title> </head> <body> <div>select:</div> <input id="project" style="width:380px;"> </body>
Comments
Post a Comment