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

当用户在margin-left div中键入内容时,我想包含<div id="1">的功能。每当他输入一个新词来构造句子时,他都应该总是得到建议。因此,我发现autocomplete可以满足我的需求。

这是显示其工作原理的jsfiddle http://jsfiddle.net/8ky5um7n/

现在,这里的问题是,每当用户获得content editable建议并选择一个建议时,该值就会添加到文本中,但后跟jquery UI。因此,基本上,文本最终看起来像是逗号分隔的值。

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

因此,在查看了代码之后,我发现这段代码将comma添加到所选单词的末尾。

auto complete

如您所见,这段代码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的结果,但是随后,它不再建议句子中的下一个单词。

我在做什么错?

ding8806799 回答:如何从自动完成建议中接收关键字而不在jQuery UI中添加逗号?

在您的split函数中,您可以设置分隔符,例如,如果要更改为分号;你可以这样写:

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

然后,您将html插入更改为:

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

http://jsfiddle.net/jzn4Lvek/

,

请考虑使用&nbsp;作为分隔符,而不是,。例如:

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("&nbsp;");
  }

  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 + "&nbsp;");
        placeCaretAtEnd(this);
        return false;
      }
    });
});

这将以HTML Non-Breaking Space的形式呈现,并且可以更好地与光标功能一起使用。我发现无论如何,输入新文本都会导致空格减少。从功能上讲,这应该不是问题。如果您要在某个地方保存数据,我将通过替换功能运行它,并将它们转换为空格,因为它们是不同的字符。

function nbsp2Space(val){
  return val.replace("&nbsp;"," ");
}
,

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

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

第二,我必须将html插入内容更改为此

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

现在,用户输入字母,获取建议,选择建议,按空格,键入第二个字母,获取建议等。

本文链接:https://www.f2er.com/3141598.html

大家都在问