JQuery autocomplete - need to be initiated only when entering a special character

Question

I'm sure you guys saw a great plugin:

http://code.drewwilson.com/entry/autosuggest-jquery-plugin

I checked this and could not find the opportunity to initiate the autosuggest plugin only when I entered a specific character. In this case, I need it to be the @ sign.

I see that he has the ability to set the minimum number of characters: minChars: number (1 by default)

However, I need the drop-down list not to appear until the @ character is entered.

FYI, here are the options in jquery.autoSuggest.js

var defaults = { asHtmlID: false, startText: "Enter Name Here", emptyText: "No Results Found", preFill: {}, limitText: "No More Selections Are Allowed", selectedItemProp: "value", //name of object property selectedValuesProp: "value", //name of object property searchObjProps: "value", //comma separated list of object property names queryParam: "q", retrieveLimit: false, //number for 'limit' param on ajax request extraParams: "", matchCase: false, minChars: 1, keyDelay: 400, resultsHighlight: true, neverSubmit: false, selectionLimit: false, showResultList: true, start: function(){}, selectionClick: function(elem){}, selectionAdded: function(elem){}, selectionRemoved: function(elem){ elem.remove(); }, formatList: false, //callback function beforeRetrieve: function(string){ return string; }, retrieveComplete: function(data){ return data; }, resultClick: function(data){}, resultsComplete: function(){} }; var opts = $ 

Thanks!

Answer 1

I have never used this control before, but it looks like you might want to look into the jquery.autoSuggest.js file (unlimited). Check this out. I think you need to change the default: case x: to case x: where x is the ascii code for the key that you want to use to run autocomplete.

  switch(e.keyCode) { case 38: // up e.preventDefault(); moveSelection("up"); break; case 40: // down e.preventDefault(); moveSelection("down"); break; case 8: // delete if(input.val() == ""){ var last = values_input.val().split(","); last = last[last.length - 2]; selections_holder.children().not(org_li.prev()).removeClass("selected"); if(org_li.prev().hasClass("selected")){ values_input.val(values_input.val().replace(","+last+",",",")); opts.selectionRemoved.call(this, org_li.prev()); } else { opts.selectionClick.call(this, org_li.prev()); org_li.prev().addClass("selected"); } } if(input.val().length == 1){ results_holder.hide(); prev = ""; } if($(":visible",results_holder).length > 0){ if (timeout){ clearTimeout(timeout); } timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay); } break; case 9: case 188: // tab or comma tab_press = true; var i_input = input.val().replace(/(,)/g, ""); if(i_input != "" && values_input.val().search(","+i_input+",") < 0 && i_input.length >= opts.minChars){ e.preventDefault(); var n_data = {}; n_data[opts.selectedItemProp] = i_input; n_data[opts.selectedValuesProp] = i_input; var lis = $("li", selections_holder).length; add_selected_item(n_data, "00"+(lis+1)); input.val(""); } case 13: // return tab_press = false; var active = $("li.active:first", results_holder); if(active.length > 0){ active.click(); results_holder.hide(); } if(opts.neverSubmit || active.length > 0){ e.preventDefault(); } break; default: if(opts.showResultList){ if(opts.selectionLimit && $("li.as-selection-item", selections_holder).length >= opts.selectionLimit){ results_ul.html('<li class="as-message">'+opts.limitText+'</li>'); results_holder.show(); } else { if (timeout){ clearTimeout(timeout); } timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay); } } break; } 

Perhaps this is more like

  switch(e.keyCode) { case 38: // up e.preventDefault(); moveSelection("up"); break; case 40: // down e.preventDefault(); moveSelection("down"); break; case 8: // delete if(input.val() == ""){ var last = values_input.val().split(","); last = last[last.length - 2]; selections_holder.children().not(org_li.prev()).removeClass("selected"); if(org_li.prev().hasClass("selected")){ values_input.val(values_input.val().replace(","+last+",",",")); opts.selectionRemoved.call(this, org_li.prev()); } else { opts.selectionClick.call(this, org_li.prev()); org_li.prev().addClass("selected"); } } if(input.val().length == 1){ results_holder.hide(); prev = ""; } if($(":visible",results_holder).length > 0){ if (timeout){ clearTimeout(timeout); } timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay); } break; case 9: case 188: // tab or comma tab_press = true; var i_input = input.val().replace(/(,)/g, ""); if(i_input != "" && values_input.val().search(","+i_input+",") < 0 && i_input.length >= opts.minChars){ e.preventDefault(); var n_data = {}; n_data[opts.selectedItemProp] = i_input; n_data[opts.selectedValuesProp] = i_input; var lis = $("li", selections_holder).length; add_selected_item(n_data, "00"+(lis+1)); input.val(""); } case 13: // return tab_press = false; var active = $("li.active:first", results_holder); if(active.length > 0){ active.click(); results_holder.hide(); } if(opts.neverSubmit || active.length > 0){ e.preventDefault(); } break; case x: if(opts.showResultList){ if(opts.selectionLimit && $("li.as-selection-item", selections_holder).length >= opts.selectionLimit){ results_ul.html('<li class="as-message">'+opts.limitText+'</li>'); results_holder.show(); } else { if (timeout){ clearTimeout(timeout); } timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay); } } break; default: //Do Nothing } 

Answer 2

I think you can play with beforeRetrieve :

 beforeRetrieve: function(string){ if (string.indexOf('@') == -1) return ""; return string; } 

From the doc:

beforeRetrieve: callback function is a user-defined function executed immediately before an AJAX request or before locating a local object. This is used to modify the search string before processing it. Therefore, if the user entered "jim" in the AutoSuggest field, you can call this function to add your request using "guy_". Making a final request = "guy_jim". The search query is passed to this function. Example: beforeRetrieve: function (string) {return string; }