jQueryUI自动完成在没有匹配时在下拉列表中显示“其他”并让用户能够选择它

Posted 2023-05-08

【中文标题】jQueryUI自动完成在没有匹配时在下拉列表中显示“其他”并让用户能够选择它

【英文标题】：jQueryUI Autocomplete display "other" on dropdown when there is no match and let users be able to choose it

【发布时间】：2021-07-04 08:24:27

【问题描述】：

当用户输入与源代码不匹配的内容时，我正在尝试在自动完成中显示“其他”选项。并让用户能够选择它。有什么办法可以做到吗？

这是我当前的代码：

$( "#brand" ).autocomplete(
    source: brand,
    minLength: 2,
    delay: 0,
    autofocus: true,
    response: function(e, ui) 
        if (ui.content.length === 0)
            //got stuck here
        
    
)

我被困住了，任何建议或意见将不胜感激.. 非常感谢。

【参考方案1】：

您用于检测缺少匹配选项的代码是有效的。要将新选项添加​​到列表中，您可以使用 ui.content.unshift()，如下所示：

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

  $("#brand").autocomplete(
    source: tags,
    minLength: 2,
    delay: 0,
    autofocus: true,
    response: function(e, ui) 
      if (ui.content.length === 0) 
        ui.content.unshift(
          value: "Other",
          label: "Other"
        );
      
    
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="brand">

【讨论】：

这是一个简单而干净的解决方案。非常感谢！

没问题，很高兴为您提供帮助