时间戳

首页 > 解决方案 > 如何根据用户当前输入以编程方式访问匹配值列表 - jQuery Autocomplete？

javascript - 如何根据用户当前输入以编程方式访问匹配值列表 - jQuery Autocomplete？

问题描述

我有这个数组

["ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"]

我在这里复制了它：https ://jsfiddle.net/bheng/Lsubhxmv/

当我输入时"P"- 我看到这个列出

预期结果

console.log(matchedValues), I should see ['ActionScript','AppleScript','Asp','Lisp','Perl','PHP','Python']

我一输入就"Py"只出现一个

预期结果

console.log(matchedValues), I should see ['Python']

我需要根据用户当前输入以编程方式访问匹配值列表。

标签： javascriptjqueryjquery-uijquery-pluginsjquery-ui-autocomplete

解决方案

您可以使用responseAutoComplete 的事件来检索过滤后的值：

$(".search").autocomplete({
  source: ["ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang"
    // other values...
  ],
  response: function(e, ui) {
    console.log(ui);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" class="search" />

推荐阅读