谷歌喜欢从 Asp.Net 中的数据库填充的下拉搜索

Question

我正在寻找一种简单但有效的方法来创建一个下拉搜索框，它应该像谷歌搜索一样工作，并且由数据库中的值填充，当我在文本框中键入任何内容时，它就会起作用。我应该能够选择任何值。我正在寻找最简单的解决方案，并且不想像我看到的每个示例那样使用 Web 服务或 ajax 控制工具包。任何帮助将不胜感激..

Answer 1

您正在寻找类似 JQuery 的自动完成功能，可在此处找到： https://jqueryui.com/autocomplete/

如果您不想使用 AJAX 查询进行搜索，您可以根据需要在 HTML 中包含所有数据。不过我不建议这样做，因为如果您的访问者查看您的来源，这些信息也会对他们公开可见。如果这不是问题，那么无论如何，走这条路。

如果您确实想通过 AJAX 加载数据，我链接到的自动完成功能也可以针对远程数据源工作。文档在这里： https://jqueryui.com/autocomplete/#remote

不使用远程数据源的示例（无 ajax）：

$(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"
];
$( "#birds" ).autocomplete({
  source: availableTags
});

在这个例子中，你必须想办法把你所有的标签打印到上面的 HTML 中，因为你显然不能硬编码。如何做到这一点，取决于您正在运行的技术。 （MVC，WebForms，...）。但是您通常只会从数据库中获取所有标签，然后将它们打印到 javascript 中。如果您需要这方面的示例并告诉我您的技术，请回复，我会更新我的答案。

远程数据源示例（使用 ajax）：

$( "#birds" ).autocomplete({
  source: "/api/GetValuesForAutocomplete", //the url to query 
  minLength: 2 //the amount of letters the user has to type before the search begins
});

 //in your HTML you would have: 
<input id="birds" />

您可以在他们的网站上找到更完整的示例。对于这样的 ajax 查询，您必须使用的 URL 取决于您的网站是用什么技术编写的。您可以访问 WEB API 项目吗？或者它是一个 MVC 网站？还是 Webforms 网站？