首頁 後端開發 php教程 利用PHP+JS实现搜索自动提示(实例)_PHP教程

利用PHP+JS实现搜索自动提示(实例)_PHP教程

Jul 21, 2016 pm 03:07 PM
使用 實例 實現 需要 提示 搜尋 教學 自動 這個

我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做。而知道这些可以让你对这个插件可以进一步的按自己的需求定制。

好,我们现在开始。
JavaScript代码 :

复制代码 代码如下:




JS的解释:
 好,从上面的代码看到,我们需要连接到一个叫做rpc.php的文件,这个文件处理所有的操作。
lookup函数使用从文本输入框中得到的单词然后使用jQuery中Ajax的方法POST把它传给rpc.php。
如果输入字符 ‘inputString'是‘0'(Zero,译注:在这里是指在搜索框中没输入任何内容),建议框就被隐藏,这也很人性化,你想,如果在搜索框中没有输入任何东西,你也不期望会出现个建议提示框。
如果输入框中有内容,我们就得到了这个 ‘inputString'并传递给rpc.php页面,然后jQuery 的$.post()函数被使用,如下:
$.post(url, [data], [callback])
‘callback'部分可以关联一个函数,这个比较有意思,只有在数据(data)被加载成功的时候才会执行(译注:此处为意译,没看懂原文:如果返回的数据(data)不为空(也就是说,有东西要显示),那就显示搜索提示框并且使用返回的数据(data)来代替其中的html代码。
就这么简单!
PHP后台程序(rpc.php):
如你所知,我的php后台程序都叫做rpc.php(RPC指远程过程调用),而没用它实际执行的功能来命名,但是也还不错了。
复制代码 代码如下:

// PHP5 Implementation - uses MySQLi.
$db = new mysqli(‘localhost', ‘root' ,”, ‘autoComplete');
if(!$db) {
    // Show error if we cannot connect.
    echo ‘ERROR: Could not connect to the database.';
} else {
    // Is there a posted query string?
    if(isset($_POST[‘queryString'])) {
        $queryString = $_POST[‘queryString'];
        // Is the string length greater than 0?
        if(strlen($queryString) >0) {
        // Run the query: We use LIKE ‘$queryString%'
        // The percentage sign is a wild-card, in my example of countries it works like this…
        // $queryString = ‘Uni';
        // Returned data = ‘United States, United Kindom';
        $query = $db->query("SELECT value FROM countries WHERE value LIKE ‘$queryString%' LIMIT 10");
        if($query) {
            // While there are results loop through them - fetching an Object (i like PHP5 btw!).
            while ($result = $query ->fetch_object()) {
                // Format the results, im using
  • for the list, you can change it.         
                    // The onClick function fills the textbox with the result.
                    echo ‘
  • '.$result->value.‘
  • ';
                }
            } else {
                echo ‘ERROR: There was a problem with the query.';
            }
        } else {
            // Dont do anything.
        } // There is a queryString.
    } else {
        echo ‘There should be no direct access to this script!';
    }
    }
    ?>

    PHP代码解释 :
    鉴于代码中我已经加了很多注释,在这里我就不再说的很详细了。
    一般情况下,需要接收这个 ‘QueryString' 然后在其最后使用通配符产生一个查询语句。
    这意味着在这种情况下,每次敲进去一个字符都需要产生一个查询语句,如果一直都这样做的话,恐怕MYSQL会受不了。但是为了尽量的简化这个过程,这种做法对一个规模较小的应用应该没什么问题。
    这段php代码你需要在自己的系统中稍作修改,比如你需要更新‘$query'到你自己的数据库,需要看在哪里放你数据库表的列名等等。
    CSS样式 :
    我使用的是CSS3,天哪,它真的很好用,虽然在Firefox 或者Safari浏览器上会有功能限制。
    复制代码 代码如下:



    CSS代码都很标准,没什么需要特别指出的。
    主文件HTML :
    这是主文件的部分html代码,你需要添加的就是一个输入框,并且把 ‘onkeyup' 函数设置为lookup(this.value)。另外,我建议你不要修改它的ID,如果你不想修改上面的Javascript代码的话。
    截图 :
    我想你应该会想要看看最后的效果是什么样子,OK。

    还有,

    最后就是有用的链接了,我想你应该期待很久了。
    源文件点击下载

    www.bkjia.comtruehttp://www.bkjia.com/PHPjc/327517.htmlTechArticle我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告...
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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)

    熱門話題

    Java教學
    1653
    14
    CakePHP 教程
    1413
    52
    Laravel 教程
    1304
    25
    PHP教程
    1251
    29
    C# 教程
    1224
    24
    得物使用教程 得物使用教程 Mar 21, 2024 pm 01:40 PM

    得物APP是當前十分火爆品牌購物的軟體,但是多數的用戶不知道得物APP中功能如何的使用,下方會整理最詳細的使用教程攻略,接下來就是小編為用戶帶來的得物多功能使用教學匯總,有興趣的用戶快來一起看看吧!得物使用教學【2024-03-20】得物分期購怎麼使用【2024-03-20】得物優惠券怎麼獲得【2024-03-20】得物人工客服怎麼找【2024-03-20】得物取件碼怎麼查看【2024-03-20】得物求購在哪裡看【2024-03-20】得物vip怎麼開【2024-03-20】得物怎麼申請退換貨

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

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

    夏天,一定要試試拍攝彩虹 夏天,一定要試試拍攝彩虹 Jul 21, 2024 pm 05:16 PM

    夏天雨後,常常能見到美麗又神奇的特殊天氣景象-彩虹。這也是攝影中可遇而不可求的難得景象,非常出片。彩虹出現有這樣幾個條件:一是空氣中有充足的水滴,二是太陽以較低的角度照射。所以下午雨過天晴後的一段時間內,是最容易看到彩虹的時候。不過彩虹的形成受天氣、光線等條件的影響較大,因此一般只會持續一小段時間,而最佳觀賞、拍攝時間更為短暫。那麼遇到彩虹,怎樣才能合理地記錄下來並拍出質感呢? 1.尋找彩虹除了上面提到的條件外,彩虹通常出現在陽光照射的方向,即如果太陽由西向東照射,彩虹更有可能出現在東

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

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

    微信關收款聲音的步驟教程 微信關收款聲音的步驟教程 Mar 26, 2024 am 08:30 AM

    1.首先打開微信。 2.點選右上角【+】。 3.點選二維碼收款。 4.點擊右上角三個小點。 5.點選關閉收款到帳語音提醒。

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

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

    百度貼吧app提示操作太頻繁怎麼回事 百度貼吧app提示操作太頻繁怎麼回事 Apr 01, 2024 pm 05:06 PM

    百度貼吧app提示操作過於頻繁這種提示通常是為了維護平台的正常運作和用戶體驗,以防止惡意刷屏、廣告刷帖等不當行為,具體的處理方法各位可以看小編分享教程哦。百度貼吧app提示操作過於頻繁處理方法分享1、當系統提示【操作太頻繁】的時候,我們需要等待一段時間,如果著急可以先去做一點別的事情,一般等待一會兒之後,這個提示信息就會自動消失,這時候我們就可以正常使用了。 2.如果等了很久之後,它還是顯示【操作過於頻繁】,我們可以嘗試去貼吧應急吧、貼吧意見反饋吧等官方貼吧,發帖反饋這種現象,請求官方人員解決。 3、

    在Linux上自動裝載驅動器 在Linux上自動裝載驅動器 Mar 20, 2024 am 11:30 AM

    如果您使用Linux作業系統,並希望系統在啟動時自動載入驅動器,可以透過將裝置的唯一識別碼(UID)和掛載點路徑新增至fstab設定檔來實現。 fstab是位於/etc目錄中的檔案系統表文件,它包含了系統在啟動時需要掛載的檔案系統的資訊。透過編輯fstab文件,您可以確保在每次系統啟動時都能正確載入所需的驅動器,從而確保系統的穩定運作。自動安裝驅動器可方便地應用於多種情境。例如,我計劃將系統備份到外部儲存設備。為了實現自動化,需確保設備與系統保持連接,甚至在啟動時。同樣,很多應用程式會直接

    See all articles