Jquery auto-complete displaying all data -
i have static json file contains data in json format. now, have implemented auto-complete functionality using jquery plugin. problem auto-complete displaying results including unnecessary ones. following javascript code,
$('input#searchbox').autocomplete({ source: function( request, response ) { $.ajax({ url: "${pagecontext.request.contextpath}/products_cache.json", datatype: "json", data: {term: request.term}, success: function(data) { response($.map(data.products, function(item) { return { value: item.product, label: item.product, key: item.id }; })); } }); }, minlength:2, select: function(event, ui) { $("#searchbox").val(ui.item.key); }, open: function() { $( ).removeclass( "ui-corner-all" ).addclass( "ui-corner-top" ); }, close: function() { $( ).removeclass( "ui-corner-top" ).addclass( "ui-corner-all" ); } });
my json file contains data in following format,
{ "products": [ { "id":"1", "product": "product1" }, { "id":"2", "product": "product2" }, { "id":"3", "product": "product3" }, { "id":"4", "product": "product4" }, { "id":"5", "product": "product5" } ]
}
ideally, when giving input ab, autocomplete should not provide suggestion. how filter out unwanted values?
i don't know ajax based jquery. tried upon code. if got error, ignore answer.
var productarray = []; $('input#searchbox').autocomplete({ source: function(request, response) { $.ajax({ url: "${pagecontext.request.contextpath}/products_cache.json", datatype: "json", data: { term: request.term }, success: function(data) { $.each(data, function(key, value) { productarray[key] = value.product; }); // \\b show each match letter in each word of list // ^ show each match letter in whole word of list var matcher = new regexp("^" + $.ui.autocomplete.escaperegex(request.term), "i"); var = $.grep(productarray, function(item, index) { return matcher.test(item); }); response(a); } }); }, minlength: 2, select: function(event, ui) { $("#searchbox").val(ui.item.key); }, open: function() { $(this).removeclass("ui-corner-all").addclass("ui-corner-top"); }, close: function() { $(this).removeclass("ui-corner-top").addclass("ui-corner-all"); } });
this how use auto complete. jquery code (sample)...
click here example
==== jquery $(document).ready(function() { getlocalitylist(); }); function getlocalitylist() { var localityarray = ["win day", "win heart of", "win heart of someone"]; $("#tags").autocomplete({ minlength: 1, source: function(req, responsefn) { // \\b show each match letter in each word of list // ^ show each match letter in whole word of list var matcher = new regexp("\\b" + $.ui.autocomplete.escaperegex(req.term), "i"); var = $.grep(localityarray, function(item, index) { return matcher.test(item); }); responsefn(a); } }); } ==== html <body> <div> <label for="tags"> search : </label> <input type="text" id="tags"> </div> </body>
Comments
Post a Comment