2

这个问题与网站编程有关。我的主要语言是 c++/c#，我对 Web 开发了解不多，除了说我了解 html 和 css。这就是为什么我正在寻找一个相对简单的解决方案，最好是开箱即用的东西。我对 JavaScript 没有任何经验，但为了这个项目，我愿意在必要时学习它。

假设我有一个数据库，其中每个条目都是关于一本书的。它包含以下字段：标题、作者和出版日期。

我想创建一个带有搜索框的简单网站，该搜索框具有此动态结果功能，以便您在输入几个字母后获得建议。所有这些建议以及搜索结果都需要完全基于数据库。

这可能是一个静态网站或基于任何内容管理系统，我对 Joomla 很熟悉，但无法找到可以做到这一点的开箱即用组件。所有这些搜索模块搜索整个网站，我只需要搜索数据库。

4

1 回答 1

1

可能我可以帮助你如何实现这个功能。我们曾经将此功能称为自动完成菜单。

首先，您决定填充自动完成菜单的最少字符。例如 2

通过使用 javascript，您可以编写 keyup 事件。一旦字符数达到最小字符数。您向服务器发送 AJAX 请求。

服务器应处理此请求并进行数据库搜索并形成 json 或 xml 响应或纯文本给客户端。

客户端将该响应解析为 javascript 对象，并使用数据构造一个用于自动完成菜单的动态 html，并将其呈现到 DOM 中，因此显示在搜索文本框的正下方。

现在，如果您想在键入时在文本框中显示第一个结果。这是我可以建议的类似于谷歌搜索框的方法

在输入文本框的正下方放置一个标签或跨度。通过使用 css 使其位置与文本框的位置完全匹配。确保输入文本和标签的文本开头都匹配。使标签的文本颜色比文本的字体颜色更亮。标签的字体大小和字体系列应与输入文本字段的样式相匹配。现在通过使用 Javascript 在标签内显示第一个或最匹配的文本。请在下面找到示例代码

 <!DOCTYPE html>
     <head>
       <style>
         label {
           position:relative;
         }
         body, input {
      font-family: 'verdana';
      font-size: 12px;
         }

      </style>
    </head>
    <html>
    <body>

      <form action="demo_form.asp">
        <input type="text" name="fname" placeholder="Matched Text" /><br>
        <label> Matched Text</label><br>
     </form>

   </body>
  </html>
于 2012-11-19T10:00:28.967 回答