jquery autocomplete特殊字符串触发器

我有以下问题：

我必须使用由char“@”触发的jquery进行特殊的自动完成

问题是，如果我用@开始文本框，它可以工作，但如果我写了一些字符后我输入@它不起作用。

它必须如何工作：-i写一些文字我想从“utilizatoriJson”添加某人， – 从“utilizatoriJson”添加某人我必须按@键并且自动完成下拉列表必须是apear， – 之后我从下拉列表中选择某人或我从下拉列表中键入一个完整的标签，它必须放置空格，让我继续留言

我怎样才能做到这一点 ？

我写的代码：

var utilizatoriJson = ; $( '#textarea_mesaj_colaborare').autocomplete({ source: utilizatoriJson }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "
" ) .append( "" + item.label + "" ) .appendTo( ul ); } $( '#textarea_mesaj_colaborare').autocomplete("disable"); $('#textarea_mesaj_colaborare').keyup(function(){ if ($('#textarea_mesaj_colaborare').val()[$('#textarea_mesaj_colaborare').val().length-1]==='@'){ var inceput = $('#textarea_mesaj_colaborare').val().length; $( '#textarea_mesaj_colaborare').autocomplete("enable"); } }); 

Answer 1

如前所述，这里需要多个单词。

上面已经提供了到原始源的链接。 所以，我想展示一下我从你怀疑中理解的东西。

但是首先让我知道你是否想要像’@’之后那样自动完成所有以’a’开头的标签都应该给出仅以’a’开头的结果，而不是那些包含’a’的结果。

因为我认为这会更好用，所以我有代码。

你的HTML

 
 Tags:    

你的JS

 $(function() { //Since you told that labels start with '@' var utilizatoriJson = [ {'label': "@ActionScript",'id':'1'}, {'label': "@Java",'id':'2'}, {'label': "@C++",'id':'3'}, {'label': "@Javascript",'id':'4'}, {'label': "@Python",'id':'5'}, {'label': "@BASIC",'id':'6'}, {'label': "@ColdFusion",'id':'7'}, {'label': "@Haskell",'id':'8'}, {'label': "@Lisp",'id':'9'}, {'label': "@Scala",'id':'10'} ]; function split( val ) { return val.split( / \s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 1, source: function( request, response ) { // delegate back to autocomplete, but extract the last term var lastword = extractLast(request.term); // Regexp for filtering those labels that start with '@' var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( lastword ), "i" ); // Get all labels var labels = utilizatoriJson.map(function(item){return item.label;}); var results = $.grep(labels ,function( item ){ return matcher.test( item ); }); response( $.ui.autocomplete.filter( results, lastword ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( " " ); return false; } }); }); 

工作演示： http ： //jsfiddle.net/AJmJt/2/

如果你不想要我说的话，那么就不需要RegExp匹配，但是你需要看看单词是否以’@’开头。

此行为的代码有效： http ： //jsfiddle.net/rPfY8/1/

Answer 2

您不希望禁用/重新启用自动完成function，因为这会阻止控件执行任何操作。 您可以按照提议的方式执行此操作，但还有另一种方法。 看一下这里的例子： http ： //jqueryui.com/autocomplete/#multiple

这应该做你想要的，你可以更新filter只进行“开始”搜索

这是我所说的JSFIDDLE示例： http ： //jsfiddle.net/UhL5d/

和相应的Javascript：

 $(function () { var availableTags = [ {value: 1, label: "@ActionScript" }, {value: 2, label: "@AppleScript" }, {value: 3, label: "@Asp" }, {value: 4, label: "@BASIC" }, {value: 5, label: "@C" } ]; function split(val) { return val.split(/\s/); } function extractLast(term) { return split(term).pop(); } $("#textarea_mesaj_colaborare").autocomplete({ source: function (request, response) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter( availableTags, extractLast(request.term))); }, focus: function () { // prevent value inserted on focus return false; }, select: function (event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item terms.push(ui.item.label); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(" "); return false; } }); });