【前端开发实例】Ajax - 实时动态查询 -（八）

Question. 问题

在输入框中输入首字母、部分内容，不需要按确认搜索就反馈给用户相关搜索结果，供用户进一步选择或者参考输入，对于用户的友好性是非常巨大的，关键字搜索、地名搜索、文章检索，都会有这样的需求，而对于前端页面而言，在页面初始化就将数据读取到 DOM 文档中的方式显然是不可行的，这时候我们就需要用 Ajax 无刷新异步获取数据的方式进行处理。

Solution. 解决

HTML 部分：

<h4>请在下面的输入框中键入字母（A - Z）：</h4>
<form action="">
    姓氏：
    <input type="text" id="txt" onkeyup="showHint(this.value)" />
</form>
<p>建议：<span id="txtHint"></span></p>

HTML 部分主要是提供给用户一个输入框，并绑定用户有按键输入操作的时候，触发绑定 Ajax 查询，并提供一个查询结果显示区域。

JS 部分：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showHint(value) {
    $.ajax({
        url: "ajax.php",
        type: "POST",
        datatype: "json",
        data: {
            val: value
        },
        beforeSend: function(XMLHttpRequest) {
            console.log(XMLHttpRequest);
        },
        success: function(data) {
            $('#txtHint').html(data);
        },
        error: function() {
            alert('error');
        }
    });
}
</script>

JS 部分主要引入 jquery 框架，使用框架封装好的 ajax 方法，向 ajax.php 后台要查询数据。

PHP 部分：

<?php
// 数据源
$name = array("Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "Wenche", "Vicky");

//获取 ajax 传递的参数
extract ( $_POST );

//如果有传入值，则查找数组中的所有提示
$hint="";
if (strlen($val) > 0) {
  for($i=0; $i<count($name); $i++) {
    if (strtolower($val)==strtolower(substr($name[$i],0,strlen($val)))) {
      if ($hint=="") {
        $hint=$name[$i];
      } else {
        $hint=$hint." , ".$name[$i];
      }
    }
  }
}

// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//输出响应
echo $response;

PHP 部分主要完成根据用户的输入进行查询的业务逻辑处理。这里数据源是一个数组，在实际开发过程中，原始数据是存储在数据库中，可以通过预处理将数据存储到文件中，以减少查询耗时，使得在数据量较大的情况下，用户也能快速获得反馈。

Effection. 效果