PHP+JS实现搜索自动提示

2016-02-20 00:46 45 1 收藏

有了下面这个PHP+JS实现搜索自动提示教程,不懂PHP+JS实现搜索自动提示的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

一如往常,demo和源码的zip包在文章最后,慢慢欣赏吧!

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

好,我们现在开始。

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的文件,这个文件处理所有的操作。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

lookup函数使用从文本输入框中得到的单词然后使用jQuery中Ajax的方法POST把它传给rpc.php。

如果输入字符 ‘inputString’是‘0’(Zero,译注:在这里是指在搜索框中没输入任何内容),建议框就被隐藏,这也很人性化,你想,如果在搜索框中没有输入任何东西,你也不期望会出现个建议提示框。

如果输入框中有内容,我们就得到了这个 ‘inputString’并传递给rpc.php页面,然后jQuery 的$.post()函数被使用,如下:

$.post(url, [data], [callback])

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

‘callback’部分可以关联一个函数,这个比较有意思,只有在数据(data)被加载成功的时候才会执行(译注:此处为意译,没看懂原文:).

如果返回的数据(data)不为空(也就是说,有东西要显示),那就显示搜索提示框并且使用返回的数据(data)来代替其中的html代码。

就这么简单!

来源:http://www.tulaoshi.com/n/20160220/1632496.html

延伸阅读
标签: PHP
  今天无意间看到一个网站,它的计数器能够在静态页里更新,我想,应该是使用js来做的,打开源代码一看,果然是: <div align=center><SPAN class=Article_tdbgall> 作者:未知 文章来源:Meidi.Net 点击数: <script language=’javascript’ src="http://img.jcwcn.com/attachment/portal"http://www.xxx.com/Article/GetH...
标签: Web开发
很多网站在首页上做一些链接,让用户来选择将要访问的各自的语言页面,让中国人选择“中文”,韩国人选择“朝鲜语”,等等。那么能不能做程序来自动帮助选择呢? 答案是肯定的,大家都在用google,你用中文系统打开google的首页,打开的自然是中文首页,而不会是其他语言。因为google会自动判断用户系统使用的首选语言是什么。 怎样才能做到像go...
标签: PHP
用户可接受的语言信息,放在$_SERVER[’HTTP_ACCEPT_LANGUAGE’]里,  变量信息是类似这样的 "zh-cn", 如果是多语言列,是类似 "zh-cn,en;q=0.8,ko;q=0.5,zh-tw;q=0.3"  下面的问题可以迎刃而解了。  代码:  <?php  error_reporting(E_ALL ^ E_NOTICE); ...
标签: PHP
  show.php源代码: <? if ($action=="cp"){ echo"<div align=center   <p滚动菜单资料输入端</p   <form method=post action=show.php?action=edit     <p文字一:         <input type=text name=t1 maxlen...
标签: Web开发
当鼠标移到产品缩略图上时能弹出显示大图,用JS写两个函数即可实现: 一个函数在鼠标移到图片上调用,显示隐藏层并将图片载入到层中; 另一个函数在鼠标移出图片上调用,清空层的内容并隐藏层。使用时需将"this.src"改为产品大图地址。 以下是引用片段: html head meta http-equiv="Content-Type" content="text/html; charse...

经验教程

684

收藏

57
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部