所謂模糊查詢就是通過關鍵字在數據中匹配到包含關鍵字的數據，而得出的查詢結果。本實例教程講解在前端文本框輸入關鍵字，顯示匹配的數據列表功能。
首先得準備一個文本框和顯示數據列表的div元素，html代碼如下所示：
<div class="match_container"> <div class="input_container"> <input type="text" placeholder="請輸入" id="input"> </div> <div class="match_into" id="match"> </div> </div>
還得準備一些數據，用於模糊查詢的檢索源，如下所示：
var aData = [ "docs help you learn and use", "Tutorials and guides include downloadable example to accelerate your projects", "These docs assume that you are already familiar with", "code can be written with just the latest JavaScript", "You can sit with us!", "to build a simple online store application", "You don't need to install anything: you'll build the app using", "You'll find many resources to complement", "We've seeded this particular app with a top bar", "Log into StackBlitz, so you can save and resume your work", "To copy a code example from this tutorial", "click the icon at the top right of the code example box", "If the StackBlitz preview pane isn't showing what you expect", "so there may be slight differences in generated code", "you'll learn about template syntax by enhancing the 'Products' area", "component you modified earlier. Let's define a route to show individual product details.", "Update the product details page to include", "Add a cart component, which displays the items you added to your cart.", "Add a shipping component, which retrieves shipping prices for the items", "Services are an integral part of Angular applications", ];
分析一下功能，本實例模糊查詢的功能很簡單，就是當在文本框輸入字符時，把輸入的字符當做關鍵字，到數據中去匹配是否包含該關鍵字。然後把包含關鍵字的數據以列表的形式顯示在文本框的下方。按照慣例，還是分步驟完成。
1. 獲取文本框和列表元素，如下所示：
//獲取輸入框 var eInput = document.getElementById('input'); //獲取列表包裹元素 var eMatch = document.getElementById('match');
2. 顯示列表元素
思考一下列表元素是如何顯示的。看起來好像是在輸入字符的時候顯示，其實不然，應該在文本框獲取焦點時就顯示列表包裹元素了，只是因爲還沒有匹配到包含數據的列表，所以是空的而已。當文本框失去焦點時，再把列表隱藏，所以在文本框上綁定focus和blur事件，如下所示：
eInput.addEventListener('focus',function(){
//顯示列表
eMatch.style.display = 'block';
});
eInput.addEventListener('blur',function(){
//隱藏列表
eMatch.style.display = 'none';
});
3. 顯示包含查詢關鍵字的數據
因爲每次輸入時，關鍵字都在修改，所以在文本框上綁定input事件。在input事件函數中查詢到匹配的數據放到列表元素中。一般數據會比較多，所以需要控制顯示列表的數量，所以還需要聲明一個max變量。如下所示：
//最大顯示條數 var nMax = 5; eInput.addEventListener('input',function(){ //聲明列表元素的html字符串 var sHTML = '<ul>'; //獲取關鍵字 var sKey = this.value; //匹配的數據總量 var nCount = 0; //通過trim函數控制關鍵字不爲空才匹配 if(sKey.trim()!=''){ //循環數據 for(let i=0;i<aData.length;i++){ //用正則檢測匹配結果 if(new RegExp(sKey,'i').test(aData[i])){ //匹配到的數據加到列表中 sHTML += '<li>'+aData[i]+'</li>'; //每匹配到一條數據，總量加1 nCount ++; } //數據達到最大條數時，跳出循環 if(nCount>=nMax)break; } } //列表結束標籤 sHTML += '</ul>'; //把列表填入到列表包裹中 eMatch.innerHTML = sHTML; });
在實際工作中，大部分情況的模糊查詢功能都是把關鍵字交給後臺從數據庫中檢索再把結果返回給前端。不過我認爲在數據量不大且固定的情況下，一次性把數據返回到前端，再由前端進行模糊查詢可以有更好更快的體驗。