Heim Backend-Entwicklung PHP-Tutorial jquery+php实现用户输入搜索内容时自动提示_PHP教程

jquery+php实现用户输入搜索内容时自动提示_PHP教程

Jul 13, 2016 pm 05:42 PM
内容 实现 提示 搜索 Stunde verwenden 用户 Plötzlich 自动 输入 页面

 今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便。

  先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果!

jquery+php实现用户输入搜索内容时自动提示

  下面先主要讲解原理:

  在search.html页面中,用户在搜索框内输入“j”时,使用javascript获取搜索框的文本内容,到数据库中查找相关的内容并返回,再使用javascript将服务器返回的结果显示在搜索框下面的提示框内,供用户参考选择。

  具体的实现方法:

  首先在页面中做好搜索框、搜索按钮、显示搜索提示的层,如下代码

<div id="search"> <br> <input type="text" name="k" class="k"> <input type="button" name="s" value="搜索"><br> </div> <br> <div id="search_auto"></div>

  使用浏览器浏览页面,会看到下图的效果

jquery+php实现用户输入搜索内容时自动提示

 

  看起来很普通,没什么样式,现在稍作样式上的调整

#search{font-size:14px;}<br> #search .k{padding:2px 1px; width:320px;} /*将搜索框宽度设置大点*/

  再将显示搜索提示的层样式调整一下,由于搜索提示层在搜索框正下方,所以我们设置其定位方式为绝对定位

  #search_auto{border:1px solid #817FB2; position:absolute;} /*设置边框、定位方式*/

  接着用JS将搜索提示层的位置放置在搜索框正下方,且宽度和搜索框相同,这里我们采用jQuery来解决

  $(#search_auto).css({width:$(#search input[name="k"]).width()+4});

  搜索提示层的位置和宽度已经确定好了,由于在用户没有输入搜索文字前这个提示框是不显示的,所以我们先要将它设置成隐藏,在提示层的样式里加上display:none将其隐藏。

  已经全部OK了,现在只要给搜索框的onkeyup注册事件即可,我们依然采用jQuery来处理,在jQuery中是keyup

$(#search input[name="k"]).keyup(function(){<br> $.post(search_auto.php,{value:$(this).val()},function(data){  //向服务器上的search_auto.php发送post数据,$.post是jQuery的方法<br> if(data==0) $(#search_auto).html().css(display,none);  //判断服务器上返回的数据,如果等于0,则表示没有找到相关的内容,所以将提示框的内容清空并隐藏<br> else $(#search_auto).html(data).css(display,block);  //如果服务器上返回的数据不等于0,则将返回的内容放到提示框内并显示提示框<br> });<br> });

  上面客户端已经做好了,已经可以将用户输入的内容发送到服务器端,并响应服务器的返回值。

 

  那么服务器端如何处理客户端发送来的数据呢,下面用PHP来举个例子

<?php <br /> $v=$_POST[value];<br> $re=mysql_query("select * from test where title like %$v% order by addtime desc limit 10");  //根据客户端发送来的数据,到数据库中查询10条相关的结果<br> if(mysql_num_rows($re) echo <ul>;<br> while($ro=mysql_fetch_array($re)) echo <li><a href="">.$ro[title].</a></li>;  //将查询得到的相关结果的标题输出,这个地方需要注意,由于通过jQuery的ajax技术返回的文本是UTF-8编码,所以如果$ro[title] 中包含中文,一定要记得用PHP的iconv或其它函数将其转换成UTF-8编码,否则在页面中看到的会是一串乱码<br> echo <li class="cls"> <a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a>& gt;</li>;  //输入一个关闭按钮,让用户不想看到提示层时可以点击关闭,关闭按钮采用jQuery,解释一下,当前点击的按钮是$(this),一直向上找到其第三个父元素,让它逐渐消失<br> echo </ul>;<br> ?>

  现在服务器已经可以正确的执行我们发送过去的数据了,并且返回相应的结果,那么现在在搜索框内输入一个文字测试一下吧,但前提是你的数据库中得有与这个文字相关的内容啊,要不然你也看不到提示框的出现,因为没有相关提示内容啊,呵呵。

  可是还有点美中不足,那就是提示框里面的内容不美观,和我们在百度搜索中看到的提示框相比,简直是太丑了,哈哈,不急,我们再用css来调整显示的效果

 

#search_auto li{background:#FFF; text-align:left;} /*设置提示框内的li标签效果*/<br> #search_auto li.cls{text-align:right;} /*设置提示框内的关闭按钮效果*/<br> #search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;} /*设置提示框内li标签下的a标签效果*/<br> #search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*当鼠标移入提示框内时的效果*/

  现在才算是真正的完全制作完成,至于要不要设置一个延迟处理,或是其它更完善的功能,留给朋友们自己开动脑筋了,大家也可以在下面回复你的想法,等等。

  客户端完整代码:




jquery+php实现用户输入搜索内容时自动提示



<div id="search"> <br> <input type="text" name="k" class="k"> <input type="button" name="s" value="搜索"><br> </div> <br> <div id="search_auto"></div>




<script><br /> $(function(){<br /> <br /> $(#search_auto).css({width:$(#search input[name="k"]).width()+4});<br /> $(#search input[name="k"]).keyup(function(){<br /> $.post(search_auto.php,{value:$(this).val()},function(data){<br /> if(data==0) $(#search_auto).html().css(display,none);<br /> else $(#search_auto).html(data).css(display,block);<br /> });<br /> });<br /> <br /> });<br /> </script>

 

  服务器端完整代码:

<?php <br /> $v=$_POST[value];<br> $re=mysql_query("select * from test where title like %$v% order by addtime desc limit 10");<br> if(mysql_num_rows($re) echo <ul>;<br> while($ro=mysql_fetch_array($re)) echo <li><a href="">.$ro[title].</a></li>;<br> echo <li class="cls"> <a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a>& gt;</li>;<br> echo </ul>;<br> ?>

 

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/486018.htmlTechArticle今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和...
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie verwende ich das Xiaohongshu-Konto, um Benutzer zu finden? Kann ich meine Handynummer finden? Wie verwende ich das Xiaohongshu-Konto, um Benutzer zu finden? Kann ich meine Handynummer finden? Mar 22, 2024 am 08:40 AM

Mit der rasanten Entwicklung der sozialen Medien hat sich Xiaohongshu zu einer der beliebtesten sozialen Plattformen entwickelt. Benutzer können ein Xiaohongshu-Konto erstellen, um ihre persönliche Identität zu zeigen und mit anderen Benutzern zu kommunizieren und zu interagieren. Wenn Sie die Xiaohongshu-Nummer eines Benutzers finden müssen, können Sie diese einfachen Schritte befolgen. 1. Wie verwende ich das Xiaohongshu-Konto, um Benutzer zu finden? 1. Öffnen Sie die Xiaohongshu-App, klicken Sie auf die Schaltfläche „Entdecken“ in der unteren rechten Ecke und wählen Sie dann die Option „Notizen“. 2. Suchen Sie in der Notizenliste nach der Notiz, die von dem Benutzer gepostet wurde, den Sie suchen möchten. Klicken Sie hier, um die Seite mit den Notizdetails aufzurufen. 3. Klicken Sie auf der Seite mit den Notizdetails auf die Schaltfläche „Folgen“ unter dem Avatar des Benutzers, um zur persönlichen Homepage des Benutzers zu gelangen. 4. Klicken Sie in der oberen rechten Ecke der persönlichen Homepage des Benutzers auf die Schaltfläche mit den drei Punkten und wählen Sie „Persönliche Informationen“.

Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird? Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird? Mar 13, 2024 pm 05:00 PM

Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird? Wenn wir Google Chrome verwenden, um einen neuen Tab zu öffnen, stoßen wir manchmal auf die Meldung, dass der Inhalt dieses Tabs geteilt wird. Was ist also los? Auf dieser Website erhalten Benutzer eine detaillierte Einführung in das Problem, dass Google Chrome dazu auffordert, den Inhalt dieser Registerkarte zu teilen. Google Chrome weist darauf hin, dass der Inhalt dieser Registerkarte freigegeben wird: 1. Öffnen Sie Google Chrome. In der oberen rechten Ecke des Browsers werden drei Punkte angezeigt. Klicken Sie zum Ändern auf das Symbol das Symbol. 2. Nach dem Klicken wird unten das Menüfenster von Google Chrome angezeigt und die Maus bewegt sich zu „Weitere Tools“.

Melden Sie sich als Superuser bei Ubuntu an Melden Sie sich als Superuser bei Ubuntu an Mar 20, 2024 am 10:55 AM

In Ubuntu-Systemen ist der Root-Benutzer normalerweise deaktiviert. Um den Root-Benutzer zu aktivieren, können Sie mit dem Befehl passwd ein Passwort festlegen und sich dann mit dem Befehl su- als Root anmelden. Der Root-Benutzer ist ein Benutzer mit uneingeschränkten Systemadministratorrechten. Er verfügt über Berechtigungen zum Zugriff auf und zum Ändern von Dateien, zur Benutzerverwaltung, zum Installieren und Entfernen von Software sowie zum Ändern der Systemkonfiguration. Es gibt offensichtliche Unterschiede zwischen dem Root-Benutzer und normalen Benutzern. Der Root-Benutzer verfügt über die höchste Autorität und umfassendere Kontrollrechte im System. Der Root-Benutzer kann wichtige Systembefehle ausführen und Systemdateien bearbeiten, was normale Benutzer nicht können. In dieser Anleitung werde ich den Ubuntu-Root-Benutzer untersuchen, wie man sich als Root anmeldet und wie er sich von einem normalen Benutzer unterscheidet. Beachten

Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mar 24, 2024 am 11:27 AM

Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mit dem Aufkommen der sozialen Medien ist WeChat zu einem unverzichtbaren Kommunikationsmittel im täglichen Leben der Menschen geworden. Viele Menschen können jedoch auf ein Problem stoßen: Sie können sich gleichzeitig auf demselben Mobiltelefon bei mehreren WeChat-Konten anmelden. Für Huawei-Mobiltelefonbenutzer ist es nicht schwierig, eine doppelte WeChat-Anmeldung zu erreichen. In diesem Artikel wird erläutert, wie eine doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen erreicht wird. Erstens bietet das EMUI-System, das mit Huawei-Mobiltelefonen geliefert wird, eine sehr praktische Funktion – das doppelte Öffnen von Anwendungen. Durch die doppelte Öffnungsfunktion der Anwendung können Benutzer gleichzeitig

Die WPS-Tabelle kann die gesuchten Daten nicht finden. Bitte überprüfen Sie den Speicherort der Suchoption Die WPS-Tabelle kann die gesuchten Daten nicht finden. Bitte überprüfen Sie den Speicherort der Suchoption Mar 19, 2024 pm 10:13 PM

In der von Intelligenz dominierten Ära ist auch Bürosoftware populär geworden, und WPS-Formulare werden aufgrund ihrer Flexibilität von der Mehrheit der Büroangestellten übernommen. Bei der Arbeit müssen wir nicht nur das einfache Erstellen von Formularen und die Texteingabe erlernen, sondern auch mehr operative Fähigkeiten beherrschen, um die Aufgaben in der tatsächlichen Arbeit erledigen zu können. Berichte mit Daten und die Verwendung von Formularen sind bequemer, klarer und genauer. Die Lektion, die wir Ihnen heute bringen, ist: Die WPS-Tabelle kann die von Ihnen gesuchten Daten nicht finden. Warum überprüfen Sie bitte den Speicherort der Suchoption? 1. Wählen Sie zunächst die Excel-Tabelle aus und doppelklicken Sie, um sie zu öffnen. Wählen Sie dann in dieser Schnittstelle alle Zellen aus. 2. Klicken Sie dann in dieser Benutzeroberfläche in der oberen Symbolleiste unter „Datei“ auf die Option „Bearbeiten“. 3. Zweitens klicken Sie in dieser Benutzeroberfläche auf „

So suchen Sie auf Mobilgeräten nach Geschäften Taobao So suchen Sie nach Geschäftsnamen So suchen Sie auf Mobilgeräten nach Geschäften Taobao So suchen Sie nach Geschäftsnamen Mar 13, 2024 am 11:00 AM

Die mobile Taobao-App-Software bietet viele gute Produkte, die Sie jederzeit und überall kaufen können. Der Preis für jedes Produkt ist völlig klar, sodass Sie bequemer einkaufen können. Sie können nach Belieben suchen und einkaufen. Fügen Sie Ihre persönliche Lieferadresse und Kontaktnummer hinzu, um die Kontaktaufnahme mit Ihnen zu erleichtern und die neuesten Logistiktrends in Echtzeit zu überprüfen Benutzer verwenden es zum ersten Mal. Wenn Sie nicht wissen, wie man nach Produkten sucht, müssen Sie natürlich nur Schlüsselwörter in die Suchleiste eingeben, um alle Produktergebnisse zu finden Der Herausgeber stellt mobilen Taobao-Benutzern detaillierte Online-Methoden für die Suche nach Geschäftsnamen zur Verfügung. 1. Öffnen Sie zunächst die Taobao-App auf Ihrem Mobiltelefon.

So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mar 24, 2024 pm 06:03 PM

So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mit der Popularität sozialer Software und der zunehmenden Bedeutung von Datenschutz und Sicherheit rückt die WeChat-Klonfunktion allmählich in den Mittelpunkt der Aufmerksamkeit der Menschen. Die WeChat-Klonfunktion kann Benutzern helfen, sich gleichzeitig bei mehreren WeChat-Konten auf demselben Mobiltelefon anzumelden, was die Verwaltung und Nutzung erleichtert. Es ist nicht schwierig, die WeChat-Klonfunktion auf Huawei-Mobiltelefonen zu implementieren. Sie müssen lediglich die folgenden Schritte ausführen. Schritt 1: Stellen Sie sicher, dass die Version Ihres Mobiltelefonsystems und die WeChat-Version den Anforderungen entsprechen. Stellen Sie zunächst sicher, dass die Version Ihres Huawei-Mobiltelefonsystems sowie die WeChat-App auf die neueste Version aktualisiert wurden.

Analyse des Speichermechanismus für Benutzerkennwörter im Linux-System Analyse des Speichermechanismus für Benutzerkennwörter im Linux-System Mar 20, 2024 pm 04:27 PM

Analyse des Speichermechanismus für Benutzerkennwörter im Linux-System Im Linux-System ist die Speicherung des Benutzerkennworts einer der sehr wichtigen Sicherheitsmechanismen. In diesem Artikel wird der Speichermechanismus von Benutzerkennwörtern in Linux-Systemen analysiert, einschließlich der verschlüsselten Speicherung von Kennwörtern, des Kennwortüberprüfungsprozesses und der sicheren Verwaltung von Benutzerkennwörtern. Gleichzeitig wird anhand konkreter Codebeispiele der tatsächliche Ablauf der Passwortspeicherung demonstriert. 1. Verschlüsselte Speicherung von Passwörtern In Linux-Systemen werden Benutzerpasswörter nicht im Klartext im System gespeichert, sondern verschlüsselt und gespeichert. L

See all articles