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. 效果