单击内容可编辑区域时启用自动完成下拉菜单

Posted 2023-05-08

【中文标题】单击内容可编辑区域时启用自动完成下拉菜单

【英文标题】：Enable autocomplete dropdown when clicked on the contenteditable area

【发布时间】：2019-05-25 18:29:24

【问题描述】：

有一个包含一些数据的 contenteditable span 标签。当我编辑跨度标记中存在的数据时，我需要清除完整的数据，然后我从自动完成列表中获得建议。我需要的是，我想在用户单击 span 标签而不编辑任何预先存在的数据时显示数据。请帮帮我。先感谢您。

【问题讨论】：

欢迎来到 Stack Overflow。请参加游览：***.com/tour 您还需要提供一个最小、完整且可验证的示例：***.com/help/mcve

【参考方案1】：

这是一个基于http://jqueryui.com/autocomplete/#multiple的非常简单的例子

$(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 split(val) 
    return val.split(" ");
  

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

  function moveCursorToEnd(el) 
    if (typeof el.selectionStart == "number") 
      el.selectionStart = el.selectionEnd = el.value.length;
     else if (typeof el.createTextRange != "undefined") 
      el.focus();
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
    
  

  $("#content")
    // don't navigate away from the field on tab when selecting an item
    .on("keydown", function(event) 
      if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).autocomplete("instance").menu.active) 
        event.preventDefault();
      
    )
    .autocomplete(
      minLength: 0,
      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 val = $(this).html();
        var terms = split(val);
        // 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).html(terms.join(" "));
        moveCursorToEnd($(this)[0]);
        return false;
      
    );
);

#content 
  min-width: 1em;
  min-height: 1em;
  border: 1px solid #eee;
  border-radius: 3px;
  padding-left: 1px;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="content">Edit content: </label>
  <span id="content" contenteditable="true">Basic</span>
</div>

如您所见，它已被修改为使用“”（空格）而不是“,”进行拆分和连接。假设您正在创建句子或单词列表，这将非常有效。

希望对您有所帮助。

【讨论】：

这很有帮助。非常感谢。