jQuery中使用Ajax实现文本输入框的自动完成功能

当我们使用搜索引擎时发现会有自动提示的功能,那么,它是怎么实现的呢?在jQuery中结合Ajax可以很容易实现自动完成的功能。

下面就在jQuery中使用Ajax提交post请求,让服务器端返回自动完成的数据显示在相应的div中。

编写html文件

主要是一个输入框,一个隐藏的div和提交按钮:


输入关键词:





编写CSS样式

为了让显示效果更好看,编写如下CSS样式:

jQuery代码

服务器端的响应程序

为了简单的验证可以编写以下php代码:

echo ‘

  • arthinking
  • ‘;
    echo ‘
  • ajax
  • ‘;
    echo ‘
  • autoComplete
  • ‘;
    echo ‘
  • abc
  • ‘;

    也可以让服务器程序查询数据库,从相应的数据库中选择匹配的数据返回给客户端:

    $keywords = $_POST[‘keywords’];
    $conn = mysql_connect(“localhost”, “root”, “123”) or die (“Please check your server connection.”);
    mysql_select_db(“autocomplete”);
    $query = “select keywords from index_list where keywords like ‘$keywords’”;
    $results = mysql_query($query) or die(mysql_error());
    if($results) {
    //从结果集中取得一行作为关联数组
    while ($row = mysql_fetch_array($results)) {
    //extract() 函数从数组中把变量导入到当前的符号表中
    extract($row);
    echo ‘

  • ‘ . $keywords. ‘
  • ‘;
    }
    }

    arthinking wechat
    欢迎关注itzhai公众号