php实现的搜索框自动提示

今天突然想给站内搜索页，以便用户可以搜索找到自己喜欢的内容，也避免了信息资源的大量手册中找麻烦，我的目标和百度家居的效果是类似的，当用户输入要搜索的文本，我有十条信息在下面，如果用户想找到这十条信息中的一个，很简单，你可以在新的页面打开网页点击，大多要更友好，更方便用户的使用。

先看看效果图，这样更有动感，或者你不知道我在说什么，到底要达到什么样的效果！

php实现的搜索框自动提示

以下原则解释如下：

在search.html页面，在搜索框，用户输入，使用Javaｓｃｒｉｐｔ来搜索文本框中，在数据库中找到相关的内容并返回，然后服务器返回的结果显示在下面的搜索框提示框在Javaｓｃｒｉｐｔ的使用，供用户参考。

具体实施方法：

首先，做一个搜索框，一个搜索按钮，一个在页面中显示搜索提示的图层，以及下面的代码

复制代码代码如下所示：
用浏览器浏览页面，并查看下图的效果

自动提示用户输入搜索内容

看起来很普通，没有风格，现在有点风格调整。

复制代码代码如下所示：

#搜索{字体大小：14px；}

#搜索。K {填充：2px 1px；宽度：320px；} / *搜索框宽度设置大。
显示搜索提示的图层样式再次调整，因为搜索提示层位于搜索框下方，因此我们设置了绝对定位的位置方法。

* /位置

然后我们使用js把搜索提示层的位置放在搜索框下面，这个搜索框和搜索框一样宽，我们用jQuery来解决它。

复制代码代码如下所示：

$（# search_auto）。Css（{ 'width：美元（#搜索输入{名称=K宽度）（+ 4 }））；
已确定搜索提示层的位置和宽度。因为提示框在用户输入搜索文本之前没有显示，所以我们需要先隐藏它，并将其隐藏在提示层的样式中，显示：无。

这一切都已经好了，现在，只是给搜索框onkeyup注册事件，我们仍然使用jQuery来处理它，并在它的KeyUp jQuery

复制代码代码如下所示：

$（#搜索输入{名称=k。KeyUp ）（函数（）{

美元。后（'search_auto。php，{价值：$（this）（。Val）功能（数据）}，{ / /后发送search_auto.php服务器上的数据，美元后的jQuery方法。

如果（数据= = 0），（# search_auto）。Html（），Css（显示器，不关'）； / /判断服务器返回的数据，如果等于0，表示相关的内容没有找到，它会提示框内容空洞和隐藏

其他（#美元search_auto）。Html（数据），Css（显示器，阻止'）； / /如果服务器返回的数据不等于0，它会返回内容为盒、展示盒

}）；

}）；
上面的客户机准备将用户的内容发送到服务器端，并响应服务器的返回值。

那么服务器如何处理客户端发送的数据呢下面是PHP的一个示例

复制代码代码如下所示：

< PHP

$ V = $ _post {value}；

重= mysql_query（SELECT * FROM测试，标题是以上是通过增加DESC LIMIT 10）； / /根据客户端发送数据10相关的数据库查询结果

如果（mysql_num_rows（重）<= 0）退出（'0'）； / /确定查询结果，如果没有相关的结果，那么0的直接收益

回声'；

而（$ RO = mysql_fetch_array回波。$ RO {标题}（重））； / /获得输出标题的查询结果，这里需要注意的是，由于文本的jQuery的Ajax技术又是UTF-8编码，所以如果$ RO {标题}包含中国，我们必须记住使用PHP iconv或其他功能转换为UTF-8编码，在页面看到否则将一个字符串乱码

回声关闭；输入/关闭按钮，让用户不想看到那个图层可以点击关闭按钮关闭，用jQuery解释当前点击按钮是$（这个），一直到找到第三个父元素，让它淡出。

回声'；

>
现在服务器已经可以正确地执行我们发送过去的数据，并返回相应的结果，所以现在在搜索框中输入一个文本来测试它，但是前提是你必须有一个与文本内容相关的数据库，或者你看不到提示框，因为没有相关的提示啊，呵呵。

但是没有什么是提示完美的，内容不漂亮的，我们在百度搜索框里看到的比它难看，呵呵，不用担心，我们用CSS来调整显示效果。

复制代码代码如下所示：

# search_auto李{背景：# FFF；文本对齐：左；} / * * /李标签设置提示框

# search_auto李。CLS {文本对齐：右；} / *设置提示框关闭按钮效果。

# search_auto李{显示：块；填充：5px 6px；鼠标指针；颜色：# 666；} / * * /标签设置提示框的标签下的李

李：# search_auto悬停{背景：# d8d8d8；文字装饰：无；颜色：# 000；} / * * /当鼠标移箱时的端部效应
现在才是真正完整的生产。至于我们是否需要设立一个延迟治疗或其他更完美的功能，让我们把我们的朋友留给他们的大脑，你也可以回答下面的想法。

客户端完整代码：

复制代码代码如下所示：

#搜索{字体大小：14px；}

#搜索。K {填充：2px 1px；宽度：320px；}

# search_auto { border: 1px solid # 817fb2；位置：绝对的；显示：无；}

# search_auto李{背景：# FFF；文本对齐：左；}

# search_auto李。CLS {文本对齐：右；}

# search_auto李{显示：块；填充：5px 6px；鼠标指针；颜色：# 666；}

李：# search_auto悬停{背景：# d8d8d8；文字装饰：无；颜色：# 000；}
自动提示用户输入搜索内容


$（函数（）{（））

$（# search_auto）。Css（{ 'width：美元（#搜索输入{名称=K宽度）（+ 4 }））；

$（#搜索输入{名称=k。KeyUp ）（函数（）{

美元。后（'search_auto。php，{价值：$（this）。瓦迩（）}，功能（数据）{）

如果（数据= = '0'）$（' # search_auto）。Html（），Css（显示器，不关）；

其他（#美元search_auto）。Html（数据），Css（显示器、阻止）；

}）；

}）；

}）；
服务器端完整代码：

复制代码代码如下所示：

< PHP

$ V = $ _post {value}；

重= mysql_query（SELECT * FROM测试，标题是以上是通过增加desc = 10 ）；

如果（mysql_num_rows（重）<= 0）退出（'0'）；

回声'；

而（$ RO = mysql_fetch_array（重））回波。$ RO {标题}。；

回声关闭；

回声'；

>
非常实用的功能，对提高用户体验和友好性非常好。合作伙伴可以结合这篇文章，自由发挥，并加入自己的项目。