Ajax实现搜索栏中输入时的自动提示功能
使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能
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函数使用从文本输入框中得到的单词然后使用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 <li> for the list, you can change it. // The onClick function fills the textbox with the result. echo ‘<li onclick="fill(’‘.$result->value.’‘);">’.$result->value.‘</li>’; } } 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浏览器上会有功能限制。
代码 <style type="text/css"> .suggestionsBox { position: relative; left: 30px; margin: 10px 0px 0px 0px; width: 200px; background-color: #212427; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff; } .suggestionList { margin: 0px; padding: 0px; } .suggestionList li { margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; } .suggestionList li:hover { background-color: #659CD8; } </style>
CSS代码都很标准,没什么需要特别指出的。
主文件HTML:
代码 <div> <div> Type your county (for the demo): <input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" /> </div> <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList"> </div> </div> </div>
这是主文件的部分html代码,你需要添加的就是一个输入框,并且把 ‘onkeyup’ 函数设置为lookup(this.value)。另外,我建议你不要修改它的ID,如果你不想修改上面的Javascript代码的话。
截图:
我想你应该会想要看看最后的效果是什么样子,OK。
演示http://res.nodstrum.com/autoComplete/index.htm
转自http://www.blueidea.com/tech/program/2008/5475_3.asp
Ajax实现搜索栏中输入时的自动提示功能的更多相关文章
- 如何在myeclipse中实现jquery的自动提示功能
在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料 jquery 1.8.3.js ...
- ASP.NET输入文本框自动提示功能
在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...
- [转]在MyEclipse中设置struts.xml自动提示功能
导入标签:<%@ taglib uri="/struts-tags" prefix="s" %> 要想在MyEclipse中实现struts.xml ...
- myeclipse输入“.”后没有自动提示功能
今天和室友安装了一样的myeclipse版本,结果室友的自动提示功能有,我的输入"."后却不能提示,这对我们敲代码简直来说是一个折磨,不能自动提示,本来还以为是系统问题,一个是wi ...
- SQLSERVER:sqlserver2008r2安装好后,自动提示功能不可以使用
刚安装好的sqlserver2008r2x64,写一些sql时,自动提示功能失效了. 解决排查一: 找到tools->options->Text Editor->Transact-S ...
- Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- C# textbox中输入时加限制条件 // C#Winform下限制TextBox只能输入数字 // 才疏学浅(TextBox 小数点不能在首位+只能输入数字)
textbox中输入时加限制条件 分类: C# winform2008-08-26 08:30 306人阅读 评论(0) 收藏 举报 textbox正则表达式object 1.用正则表达式! 2.使用 ...
- MyEclipse 10.x中拓展自动提示功能
原文转自:MyEclipse 10.7中拓展自动提示功能 在myeclipse 9以前的版本中,我们如果要为html编辑器添加自动的代码提示可以这样操作: 1.windows-->prefere ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
随机推荐
- QScrollArea可以帮助我们实现让一个widget的内容带有滚动条(QWidget里内置QScrollArea,QScrollArea里再内置其它QWidget)
使用QScrollArea可以帮助我们实现让一个widget的内容带有滚动条,用户可以通过拖动滚动条来查看更多内容, 代码示例如下: 1.带有滚动条的widget列表 #include "w ...
- JavaWeb笔记——JSTL标签
JSTL 1. jstl的概述 * apache的东西,依赖EL * 使用jstl需要导入jstl.jar.standard.jar * 四大库: > core:核心库,重点 ...
- Git设置及GitHub的使用
把github上的help略略翻译一遍.备忘. First : 安装:ubuntu 下,终端输入命令: sudo apt-get install git-core git-gui git-doc Ne ...
- SPOJ 227 Ordering the Soldiers 线段树 / 树状数组
题意:设原数组为a[i],pos[i]代表第 i 个位置之前有多少个数比a[i]大,求原数组a[i]. 这个题意是看了别人的题解才明白,我自己没读出来…… 方法:假设我们从左往右放,因为后面的数还有可 ...
- python中的 zip函数详解
python中zip()函数用法举例 定义:zip([iterable, ...]) zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个tuple ...
- [原]素数筛法【Sieve Of Eratosthenes + Sieve Of Euler】
拖了有段时间,今天来总结下两个常用的素数筛法: 1.sieve of Eratosthenes[埃氏筛法] 这是最简单朴素的素数筛法了,根据wikipedia,时间复杂度为 ,空间复杂度为O(n). ...
- $.getJSON ashx 跨域
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
- c语言宏定义
一. #define是C语言中提供的宏定义命令,其主要目的是为程序员在编程时提供一定的方便,并能在一定程度上提高程序的运行效率,但学生在学习时往往不能理解该命令的本质,总是在此处产生一些困惑,在编程时 ...
- 【转载】Javascript原型继承-学习笔记
阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javas ...
- DataGridView 相关操作
一.单元格内容的操作// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index Consol ...