使用 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实现搜索栏中输入时的自动提示功能的更多相关文章

  1. 如何在myeclipse中实现jquery的自动提示功能

    在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料   jquery 1.8.3.js ...

  2. ASP.NET输入文本框自动提示功能

    在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...

  3. [转]在MyEclipse中设置struts.xml自动提示功能

    导入标签:<%@ taglib uri="/struts-tags" prefix="s" %> 要想在MyEclipse中实现struts.xml ...

  4. myeclipse输入“.”后没有自动提示功能

    今天和室友安装了一样的myeclipse版本,结果室友的自动提示功能有,我的输入"."后却不能提示,这对我们敲代码简直来说是一个折磨,不能自动提示,本来还以为是系统问题,一个是wi ...

  5. SQLSERVER:sqlserver2008r2安装好后,自动提示功能不可以使用

    刚安装好的sqlserver2008r2x64,写一些sql时,自动提示功能失效了. 解决排查一: 找到tools->options->Text Editor->Transact-S ...

  6. Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  7. C# textbox中输入时加限制条件 // C#Winform下限制TextBox只能输入数字 // 才疏学浅(TextBox 小数点不能在首位+只能输入数字)

    textbox中输入时加限制条件 分类: C# winform2008-08-26 08:30 306人阅读 评论(0) 收藏 举报 textbox正则表达式object 1.用正则表达式! 2.使用 ...

  8. MyEclipse 10.x中拓展自动提示功能

    原文转自:MyEclipse 10.7中拓展自动提示功能 在myeclipse 9以前的版本中,我们如果要为html编辑器添加自动的代码提示可以这样操作: 1.windows-->prefere ...

  9. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

随机推荐

  1. QScrollArea可以帮助我们实现让一个widget的内容带有滚动条(QWidget里内置QScrollArea,QScrollArea里再内置其它QWidget)

    使用QScrollArea可以帮助我们实现让一个widget的内容带有滚动条,用户可以通过拖动滚动条来查看更多内容, 代码示例如下: 1.带有滚动条的widget列表 #include "w ...

  2. JavaWeb笔记——JSTL标签

    JSTL 1. jstl的概述   * apache的东西,依赖EL   * 使用jstl需要导入jstl.jar.standard.jar   * 四大库:     > core:核心库,重点 ...

  3. Git设置及GitHub的使用

    把github上的help略略翻译一遍.备忘. First : 安装:ubuntu 下,终端输入命令: sudo apt-get install git-core git-gui git-doc Ne ...

  4. SPOJ 227 Ordering the Soldiers 线段树 / 树状数组

    题意:设原数组为a[i],pos[i]代表第 i 个位置之前有多少个数比a[i]大,求原数组a[i]. 这个题意是看了别人的题解才明白,我自己没读出来…… 方法:假设我们从左往右放,因为后面的数还有可 ...

  5. python中的 zip函数详解

    python中zip()函数用法举例 定义:zip([iterable, ...]) zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个tuple ...

  6. [原]素数筛法【Sieve Of Eratosthenes + Sieve Of Euler】

    拖了有段时间,今天来总结下两个常用的素数筛法: 1.sieve of Eratosthenes[埃氏筛法] 这是最简单朴素的素数筛法了,根据wikipedia,时间复杂度为 ,空间复杂度为O(n). ...

  7. $.getJSON ashx 跨域

    context.Response.AddHeader("Access-Control-Allow-Origin", "*");

  8. c语言宏定义

    一. #define是C语言中提供的宏定义命令,其主要目的是为程序员在编程时提供一定的方便,并能在一定程度上提高程序的运行效率,但学生在学习时往往不能理解该命令的本质,总是在此处产生一些困惑,在编程时 ...

  9. 【转载】Javascript原型继承-学习笔记

    阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javas ...

  10. DataGridView 相关操作

    一.单元格内容的操作// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index Consol ...