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

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

Jun 06, 2016 pm 07:57 PM
內容 實現 搜尋 使用者 自動 輸入

可是还有点美中不足,那就是提示框里面的内容不美观,和我们在百度搜索中看到的提示框相比,简直是太丑了,哈哈,不急,我们再用css来调整显示的效 #search_auto li.cls{text-align:right;} /*设置提示框内的关闭按钮效果*/ #search_auto li a:hover{backgro


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

    #search_auto li.cls{text-align:right;} /*设置提示框内的关闭按钮效果*/

    #search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*当鼠标移入提示框内时的效果*/
      现在才算是真正的完全制作完成,至于要不要设置一个延迟处理,或是其它更完善的功能,留给朋友们自己开动脑筋了,大家也可以在下面回复你的想法,等等。
      客户端完整代码:
    
    


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

    


    
    

    
    

    
    <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>
    
      服务器端完整代码:
        $v=$_POST[value];
    $re=mysql_query("select * from test where title like %$v% order by addtime desc limit 10");
    if(mysql_num_rows($re)    echo

    ;
        while($ro=mysql_fetch_array($re)) echo
  • .$ro[title].
  • ;
        echo
  • 关闭& gt;
  • ;
        echo
;
    ?>

  [1] [2] 

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何用小紅書號找出用戶?能查到手機號碼嗎? 如何用小紅書號找出用戶?能查到手機號碼嗎? Mar 22, 2024 am 08:40 AM

隨著社群媒體的迅速發展,小紅書已經成為了備受青睞的社群平台之一。用戶可以透過建立小紅書號來展示個人身份,並與其他用戶交流互動。如果你需要找某個用戶的小紅書號碼,可以按照以下簡單步驟來操作。一、如何用小紅書號找出用戶? 1.開啟小紅書APP,點選右下角的「發現」按鈕,然後選擇「筆記」選項。 2.在筆記清單中,找到你想找的用戶發布的筆記。點擊進入筆記詳情頁。 3.在筆記詳情頁中,點選使用者頭像下方的「追蹤」按鈕,即可進入該使用者的個人首頁。 4.在使用者個人主頁右上角,點選三個點按鈕,然後選擇「個人資訊

以超級使用者登入Ubuntu 以超級使用者登入Ubuntu Mar 20, 2024 am 10:55 AM

在Ubuntu系統中,root使用者通常是停用狀態的。要啟動root用戶,可以使用passwd指令設定密碼,然後使用su-指令以root身分登入。根用戶是具有系統管理權限且不受限制的使用者。他擁有存取和修改檔案、使用者管理、軟體安裝和刪除,以及系統配置變更等權限。根用戶與一般用戶有著明顯的區別,根用戶擁有系統中最高的權限和更廣泛的控制權。根用戶可以執行重要的系統命令和編輯系統文件,而普通用戶則無法做到這一點。在本指南中,我將探討Ubuntu根用戶,如何以根用戶身份登錄,以及它與一般用戶的不同之處。注意

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

wps表格找不到正在搜尋的資料,請檢查搜尋選項位置 wps表格找不到正在搜尋的資料,請檢查搜尋選項位置 Mar 19, 2024 pm 10:13 PM

智能為主導的時代,辦公室軟體也普及開來,Wps表格由於它的靈活性被廣大的辦公室人員採用。在工作上要求我們不只是要學會簡單的表格製作和文字輸入,我們要掌握更多的操作技能,才能完成實際工作中的任務,有數據的報表,運用表格更方便更清楚更準確。今天我們帶給大家的課程是:wps表格找不到正在搜尋的資料,為什麼請檢查搜尋選項位置? 1.先選取Excel表格,雙擊開啟。然後在該介面中,選取所有的儲存格。  2、然後在該介面中,點選頂部工具列裡「檔案」裡的「編輯」選項。  3、其次在該介面中,點選頂部工具列裡的“

手機淘寶怎麼搜尋店鋪 搜尋店舖名的方法 手機淘寶怎麼搜尋店鋪 搜尋店舖名的方法 Mar 13, 2024 am 11:00 AM

手機淘寶app軟體內提供的商品好物非常多,隨時隨地想買就買,而且件件都是正品,每一件商品的價格標籤一清二楚,完全沒有任何的複雜操作,享受更加便捷的購物樂趣。隨心所欲自由搜尋選購,不同品類的商品板塊都是開放的,添加個人的收貨地址以及聯絡電話,方便快遞公司聯繫到你,實時查看最新的物流動態,那麼有些新人用戶第一次使用它,不知道如何搜尋商品,當然只需要在搜尋欄輸入關鍵字就能找到所有的商品結果,自由選購根本停不下來,現在小編在線詳細為手機淘寶用戶們帶來搜尋店鋪名的方法。  1.先打開手機淘寶app,

Linux小技巧:取消vim貼上時的自動縮排 Linux小技巧:取消vim貼上時的自動縮排 Mar 07, 2024 am 08:30 AM

前言vim是個強大的文字編輯的工具,在Linux端得到極大的使用熱度。最近在另外一台伺服器上使用vim時,遇到了一個奇怪的問題:當我將本地編寫好的腳本複製並貼上到伺服器中的空白檔案時,出現了自動縮排的情況。用個簡單的例子來說,就是我在本地寫的腳本如下:aaabbbcccddd當我將上述內容複製後,粘貼到伺服器中的空白文件後得到的卻是:aabbbcccddd很明顯,這是vim給我們自動進行了格式縮排。但是,這個自動有點不聰明。這裡記錄下解決方案。解決方案:設定.vimrc設定檔我們在家目錄下,新

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

See all articles