如何使用自动填充html列表为用户创建搜索字段

Posted 2023-04-18

【中文标题】如何使用自动填充html列表为用户创建搜索字段

【英文标题】：How to make search field for user with autofill for html list

【发布时间】：2013-10-17 23:59:53

【问题描述】：

我需要在我的网站上设置一个搜索字段，允许用户搜索他们的位置（获取当地天气预报）。

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

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

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

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

我知道一些html和javascript，但这一个在我的水平之上。

我在 *** Filter search for <ul> 上找到了这段代码。就是这样 - 但用户不能看到列表。

【问题讨论】：

在搜索框中使用自动完成功能，它是输入字段的 html 属性

【参考方案1】：

您会与我们分享一些信息：

您知道一些 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

总结：

事情也一样，主要流程是：

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

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

使用 `$('selecter').html(data); 显示它

祝你好运。