如何从自动完成建议中接收关键字，而不在 jQuery UI 的末尾添加逗号？

Posted 2023-05-08

【中文标题】如何从自动完成建议中接收关键字，而不在 jQuery UI 的末尾添加逗号？

【英文标题】：How to receive keywords from auto complete suggestions without a comma added to the end in jQuery UI?

【发布时间】：2020-03-04 12:32:24

【问题描述】：

当用户在content editable div 中键入内容时，我想包含autocomplete 的功能。每次他输入一个新词来构造句子时，他应该总是得到建议。所以我找到了满足我需求的jquery UI。

这是显示它工作的 jsfiddle http://jsfiddle.net/8ky5um7n/

现在的问题是，每次用户收到autocomplete 建议并选择一个时，该值都会添加到文本中，但后面会出现comma。所以基本上文本最终看起来像一个逗号分隔的值。

现在我要做的是从auto complete 列表中删除添加到每个选择中的comma，使其看起来像一个句子而不是逗号分隔的列表。

所以在查看代码后，我发现这段代码在所选单词的末尾添加了comma。

select: function (event, ui) 

                var value = $(this).html();
                var terms = split(value);
                terms.pop();
                terms.push(ui.item.value);
                $(this).html(terms+", ");
                placeCaretAtEnd(this);

            return false;
        

如您所见，这段代码$(this).html(terms+", ");最后添加了一个comma。所以就修改成这个

$(this).html(terms);  // I want just the term. So when user receives it, he presses space and next autocomplete suggestion is expected

它在没有comma 的情况下返回结果，但随后，它不再建议句子中的下一个单词。

我做错了什么？

【问题讨论】：

您的小提琴似乎不起作用，我在控制台中看到 2 个错误。 TypeError: $(...).bind(...).autocomplete is not a function _display:102:8 和 TypeError: $.ui is undefined 5 _display:97:13

您想用什么作为分隔符？我猜既然你想造一个句子，你就想用空格" "。目前，您的代码使用逗号","，以便它可以更轻松地创建一个数组然后操作该数组。

在进行一些测试时，当您选择第一项，然后开始输入第二个单词时，某些东西正在删除两个单词之间的空格，导致它尝试和过滤不正确。进一步测试。

【参考方案1】：

在您的 split 函数中，您可以设置分隔符，例如，如果您想更改为分号；你可以写：

function split( val ) 
  return val.split( /;\s*/ );

然后您将 html 插入更改为：

$(this).html(terms.join(" ") + "; ");

http://jsfiddle.net/jzn4Lvek/

【参考方案2】：

考虑使用  作为分隔符而不是,。例如：

https://jsfiddle.net/Twisty/0omdux5h/

JavaScript

$(function() 
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "javascript",
    "Lisp",
    "Perl",
    "php",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];


  function placeCaretAtEnd(el) 
    el.focus();
    if (typeof window.getSelection != "undefined" &&
      typeof document.createRange != "undefined") 
      var range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
     else if (typeof document.body.createTextRange != "undefined") 
      var textRange = document.body.createTextRange();
      textRange.moveToElementText(el);
      textRange.collapse(false);
      textRange.select();
    
  


  function split(val) 
    return val.split(" ");
  

  function extractLast(term) 
    return split(term).pop();
  

  $("#tags")
    .bind("keydown", function(event) 
      if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).data("ui-autocomplete").menu.active) 
        event.preventDefault();
      
    )
    .autocomplete(
      minLength: 0,
      source: function(request, response) 
        var that = $("#tags");
        response($.ui.autocomplete.filter(
          availableTags, extractLast(that.html())));
      ,
      focus: function() 
        return false;
      ,
      select: function(event, ui) 
        var terms = split($(this).html());
        terms.pop();
        terms.push(ui.item.value);
        var str = terms.join(" ");
        $(this).html(str + " ");
        placeCaretAtEnd(this);
        return false;
      
    );
);

这会在 HTML 中呈现为 Non-Breaking Space，并且与您的光标功能配合使用会更好。我发现无论如何，新文本的输入都会导致空间下降。从功能上讲，这应该不是问题。如果您将数据保存在某个地方，我会通过替换函数运行它并将它们转换回空格，因为它们是不同的字符。

function nbsp2Space(val)
  return val.replace(" ", " ");

【讨论】：

您的 jsfiddle 似乎不起作用。我输入字母时没有收到任何建议。

好的，当我复制你的代码并粘贴到一个新的小提琴中时，它给出了第一个单词的建议，但没有给出下一个单词。

【参考方案3】：

我解决了。 @Peter 的解决方案很接近。所以我不得不在两个地方换。首先必须将split 函数更改为

function split( val ) 
      return val.split( / \s*/ );  //notice the (space) that I provided
    

其次，我必须将 html 插入更改为此

$(this).html(terms.join(" ") + "");

现在用户输入一个字母，获得建议，选择它，点击空格，输入第二个字母，获得建议等等。