Question

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

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

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

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

Answer 1

可能我可以帮助您了解如何实现此功能。我们以前将此功能称为自动完成菜单。

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

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

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

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

现在，如果要在键入时在文本框中显示第一个结果。以下是我可以建议的与Google搜索框类似的方法

在输入文本框的正下方放置一个标签或跨度。通过使用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>

在网站上的动态数据库搜索结果

1 个答案: