javascript搜索自動提示功能的實現(xiàn)第1/3頁
更新時間:2008年06月04日 23:08:08 作者:
使用 jQuery(Ajax)/PHP/MySQL實現(xiàn)自動完成功我覺得我有必要寫這個教程,因為曾經見到的大部分關于自動完成的應用程序都只是給你一個程序源碼包,然后告訴你怎么使用,而不是告訴你它是如何工作的以及為什么這樣做。
使用 jQuery(Ajax)/PHP/MySQL實現(xiàn)自動完成功能
一如往常,demo和源碼的zip包在文章最后,慢慢欣賞吧!
我覺得我有必要寫這個教程,因為曾經見到的大部分關于自動完成的應用程序都只是給你一個程序源碼包,然后告訴你怎么使用,而不是告訴你它是如何工作的以及為什么這樣做。而知道這些可以讓你對這個插件可以進一步的按自己的需求定制(關于這一點我在我的blog里寫過不少關于其他應用的文章)。

好,我們現(xiàn)在開始。
JavaScript代碼:
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$(‘#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$(‘#suggestions').show();
$(‘#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$(‘#inputString').val(thisValue);
$(‘#suggestions').hide();
}
</script>
JS的解釋:
好,從上面的代碼看到,我們需要連接到一個叫做rpc.php的文件,這個文件處理所有的操作。
lookup函數(shù)使用從文本輸入框中得到的單詞然后使用jQuery中Ajax的方法POST把它傳給rpc.php。
如果輸入字符 ‘inputString'是‘0'(Zero,譯注:在這里是指在搜索框中沒輸入任何內容),建議框就被隱藏,這也很人性化,你想,如果在搜索框中沒有輸入任何東西,你也不期望會出現(xiàn)個建議提示框。
如果輸入框中有內容,我們就得到了這個 ‘inputString'并傳遞給rpc.php頁面,然后jQuery 的$.post()函數(shù)被使用,如下:
$.post(url, [data], [callback])
‘callback'部分可以關聯(lián)一個函數(shù),這個比較有意思,只有在數(shù)據(data)被加載成功的時候才會執(zhí)行(譯注:此處為意譯,沒看懂原文:<).
如果返回的數(shù)據(data)不為空(也就是說,有東西要顯示),那就顯示搜索提示框并且使用返回的數(shù)據(data)來代替其中的html代碼。
就這么簡單!
一如往常,demo和源碼的zip包在文章最后,慢慢欣賞吧!
我覺得我有必要寫這個教程,因為曾經見到的大部分關于自動完成的應用程序都只是給你一個程序源碼包,然后告訴你怎么使用,而不是告訴你它是如何工作的以及為什么這樣做。而知道這些可以讓你對這個插件可以進一步的按自己的需求定制(關于這一點我在我的blog里寫過不少關于其他應用的文章)。

好,我們現(xiàn)在開始。
JavaScript代碼:
復制代碼 代碼如下:
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$(‘#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$(‘#suggestions').show();
$(‘#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$(‘#inputString').val(thisValue);
$(‘#suggestions').hide();
}
</script>
JS的解釋:
好,從上面的代碼看到,我們需要連接到一個叫做rpc.php的文件,這個文件處理所有的操作。
lookup函數(shù)使用從文本輸入框中得到的單詞然后使用jQuery中Ajax的方法POST把它傳給rpc.php。
如果輸入字符 ‘inputString'是‘0'(Zero,譯注:在這里是指在搜索框中沒輸入任何內容),建議框就被隱藏,這也很人性化,你想,如果在搜索框中沒有輸入任何東西,你也不期望會出現(xiàn)個建議提示框。
如果輸入框中有內容,我們就得到了這個 ‘inputString'并傳遞給rpc.php頁面,然后jQuery 的$.post()函數(shù)被使用,如下:
$.post(url, [data], [callback])
‘callback'部分可以關聯(lián)一個函數(shù),這個比較有意思,只有在數(shù)據(data)被加載成功的時候才會執(zhí)行(譯注:此處為意譯,沒看懂原文:<).
如果返回的數(shù)據(data)不為空(也就是說,有東西要顯示),那就顯示搜索提示框并且使用返回的數(shù)據(data)來代替其中的html代碼。
就這么簡單!
相關文章
Vue3基于countUp.js實現(xiàn)數(shù)字滾動的插件
本文主要介紹了Vue3基于countUp.js實現(xiàn)數(shù)字滾動的插件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04JS實現(xiàn)統(tǒng)計字符串中字符出現(xiàn)個數(shù)及最大個數(shù)功能示例
這篇文章主要介紹了JS實現(xiàn)統(tǒng)計字符串中字符出現(xiàn)個數(shù)及最大個數(shù)功能,結合實例形式分析了javascript字符串遍歷、統(tǒng)計相關操作技巧,需要的朋友可以參考下2018-06-06textarea不能通過maxlength屬性來限制字數(shù)的解決方法
textarea稱文本域,又稱文本區(qū),其不能通過maxlength屬性來限制字數(shù),為此必須尋求其他方法來加以限制以達到預設的需求2014-09-09