javascript - use multiple triggers in jQuery autocomplete using mutiple datasets -
i trying implement twitter/facebook auto-complete on textarea. till have implemented single trigger "@". want work 2 triggers "@" , "#". both have different data sets.
here single dataset. 1 works perfectly.
html
<!doctype html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <meta charset="utf-8"> <title>js bin</title> </head> <body> <textarea class="searchbox" cols="20" rows="10"></textarea> </body> </html> js
var triggered = false; // default trigger off var trigger = "@"; // defining trigger var data = [ { label: "abc", value: "abc@live.com" }, { label: "def", value: "deg@altman.com" }, { label: "ghf", value: "sds@lane.com" } ]; $(".searchbox").autocomplete({ minlength: 0, source: data, search: function () { if (!triggered) { return false; } }, select: function (event, ui){ var text = this.value; var pos = text.lastindexof(trigger); this.value = text.substring(0, pos) + ui.item.value; triggered = false; return false; }, focus: function () { return false; } }).data( "ui-autocomplete" )._renderitem = function (ul, item) { return $("<li>") .append("<a>" + "<b>" + item.label + "</b> " + item.value + "</a>") .appendto(ul); }; $('.searchbox').keyup(function (e) { if (e.keycode == 38 || e.keycode == 40) { return; } var text = this.value; var len = text.length; var last; var query; var index; if (triggered) { index = text.lastindexof(trigger); query = text.substring(index + trigger.length); $(this).autocomplete("search",query); } else if (len >= trigger.length) { last = text.substring(len - trigger.length); triggered = (last === trigger); } }); here fiddle : http://jsbin.com/qakefini/7/edit
now tried 2 triggers :
html
<!doctype html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <meta charset="utf-8"> <title>js bin</title> </head> <body> <textarea class="searchbox" cols="20" rows="10"></textarea> </body> </html> js
var triggered = false; var trigger1 = "@"; var trigger2 = "#"; // defining trigger var trigger = "@"; var data1 = [ { label: "abc", value: "abc@live.com" }, { label: "def", value: "deg@altman.com" }, { label: "ghf", value: "sds@lane.com" } ]; var data2 = [ { tag: "what" }, { tag: "hello" }, { tag: "there" } ]; var data = jquery.extend(true, {}, data1); $(".searchbox").autocomplete({ minlength: 0, source: data, search: function () { if (!triggered) { return false; } }, select: function (event, ui){ var text = this.value; var pos = text.lastindexof(trigger); this.value = text.substring(0, pos) + ui.item.value; triggered = false; return false; }, focus: function () { return false; } }).data( "ui-autocomplete" )._renderitem = function (ul, item) { return $("<li>") .append("<a>" + "<b>" + item.label + "</b>" + item.value + "</a>") .appendto(ul); }; $(".searchbox").keypress(function (e) { if (e.charcode != 64 && e.charcode != 35) { return; } if (e.charcode == 64) { trigger = trigger1; data = jquery.extend(true, {}, data1); } else if (e.charcode == 35 ){ trigger = trigger2; data = jquery.extend(true, {}, data2); } }); $(".searchbox").autocomplete({ minlength: 0, source: data, search: function () { if (!triggered) { return false; } }, select: function (event, ui){ var text = this.value; var pos = text.lastindexof(trigger); this.value = text.substring(0, pos) + ui.item.value; triggered = false; return false; }, focus: function () { return false; } }).data( "ui-autocomplete" )._renderitem = function (ul, item) { return $("<li>") .append("<a>" + "<b>" + item.label + "</b> " + item.value + "</a>") .appendto(ul); }; $('.searchbox').keyup(function (e) { if (e.keycode == 38 || e.keycode == 40) { return; } var text = this.value; var len = text.length; var last; var query; var index; if (triggered) { index = text.lastindexof(trigger); query = text.substring(index + trigger.length); $(this).autocomplete("search",query); } else if (len >= trigger.length) { last = text.substring(len - trigger.length); triggered = (last === trigger); } }); and here fiddle: http://jsbin.com/qakefini/22/edit
it not responding search queries. going wrong ? please help. thanks. regards.
in second example, have 2 arrays data1 , data2, yet you're telling .autocomplete() data source data (the line reads: source: data) - undefined.
Comments
Post a Comment