如何通过自动填充html列表为用户制作搜索字段

How to make search field for user with autofill for html list

本文关键字：用户 搜索 字段 列表 何通过 填充 html      更新时间：2023-09-26

我需要在我的网站上有一个搜索字段，允许用户搜索他们的位置(用于本地天气预报(。

我有一个 html 位置列表 - 每个位置都是可点击的(带有相关天气预报页面的 href(。

用户应开始在搜索字段中键入位置 - 键入位置名称时，匹配函数应启动并自动填充搜索字段。

用户不应看到列表 - 只能看到搜索字段。

匹配功能自动填充搜索字段后，用户应按 go 或返回 - 并激活相关天气预报的链接。

我知道一些html和javascript，但这个高于我的水平。

我在堆栈溢出过滤器搜索

    时找到了这段代码。 它是这样的 - 但用户不得看到列表。

你会和我们分享一些信息：

您知道一些 HTML，但不想显示它？如果您只是向我们发送一些代码，我们会更好地帮助您！:)

你需要什么

好的，事情是这样的。

首先创建一个输入字段，例如：

<input type="text" name="text" id="text" value="" onkeyup="search()"/>

然后使用一个函数作为：

function search () {
  var value_field = $('#text').val();
  $.ajax({
    // create an ajax request here..and get the value
    success: function (data) {
      $('#div').html(data);
    }
  });
}
<div id="div"></div>

这将是来自 ajax 的所有数据都会来显示的div。

所有事情发生的地方

现在主要内容来自另一页。您需要控制它以显示数据或隐藏它或您想要它执行的任何操作。这将发生在请求所在的页面的另一页上。

您可以尝试仅在存在完美匹配时才显示数据，否则请写下以下内容：

$('#div').html('Keep writing, you can match');

并让用户多写一些字，谁知道他心思匹配！

用户将永远不会看到该列表

直到或者除非你让他去页面，直到那时他只会看到你正在查看他的结果！因此，当请求仅为 Ajax 时，您应该使用数据库来显示数据，否则不要创建与数据库的连接。这样，用户永远不会看到列表，除非是你！:D

总结：

事情是一样的，主要过程是：

  1. 您可以在输入字段中创建一个function，以便在添加任何单词时进行搜索。现在忘记退格。

  2. 您将值发送到下一页进行处理，获取数据，将其设置为您希望用户看到的类型。

  3. 使用"$(选择器"(.html(数据(显示它;

祝你好运。

相关文章：