我們這裡使用HTML5的新特性datalist實現輸入框的自動下拉提示，用datalist通過id與input關聯起來，在搜尋時就會出現下拉框。下面是HTML程式碼。

　　<!-- 輸入框 -->
    <input type="text" size="50" id="search" name="search" list="browser" onkeyup="search()" onblur="searchOnBlur()" />
    <!-- 下面是內容展示區域 -->
    <datalist id="browser">
    </
 
datalist>

下面是js部分，使用的原生ajax，非同步請求方式

onreadystatechange事件處理函式：該函式由伺服器觸發而不是使用者，每次readyState屬性的改變都會觸發onreadystatechange事件

readyState表示Ajax的當前狀態。用數值來表示是，0表示初始化、1表示正在載入、2表示已載入完、3表示伺服器正在傳送響應、4表示響應傳送完畢

<script>
    //搜尋框值改變的函式
    function search() {
        var search = document.getElementById("search").value;
        
 
var httpRequest = createXmlHttpRequest();
        httpRequest.open("get","${pageContext.request.contextPath}/ui.do?cmd=search&search="+search,true);
        //httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        httpRequest.send();

        httpRequest.onreadystatechange 
 
= function () {
            if (httpRequest.readyState == 4 && httpRequest.status ==200){
                clearContent();
                var context = httpRequest.responseText;
                var json = eval("("+context+")");
                var size = json.length;
                for (var i=0;i<size;i++){
                    var nextNode = json[i]; // 代表的是JSON格式資料的第i個元素
                    var option = document.createElement("option"); //給datalist新增option
                    option.setAttribute("value",nextNode);  //給option新增value 
                    document.getElementById("browser").appendChild(option) //把option新增到datalist上
                }
            }
        }
    }
    function clearContent() {
        var browser = document.getElementById("browser");
        for (var i=browser.childNodes.length-1;i>=0;i--){
            browser.removeChild(browser.childNodes[i]);
        }
    }
    function searchOnBlur() {//失去焦點，清空。
        clearContent();
    }
    //支援XMLHttpRequest的瀏覽器  實際簡單就一句話XMLHttpRequest xmlHttp = new XMLHttpRequest()
    function createXmlHttpRequest(){
        var xmlHttp;
        try{
            // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        }catch (e){
            // Internet Explorer
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e){
                    alert("您的瀏覽器不支援AJAX！");
                    return false;
                }
            }
        }
        return xmlHttp;
    }
</script>

servlet中，通過獲得輸入的引數向資料庫查詢出list，通過JSONArray.fromObject()解析成json能夠解析的格式，使用JSONArray.fromObject()需要匯入六個依賴包

@WebServlet(name = "UIServlet",urlPatterns = "/ui.do")   
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        var cmd = request.getParameter("cmd");
        if ("search".equals(cmd)) search(request,response);
    }

public void search(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        var name = request.getParameter("search");　　
　　     //下面這一行是我的查詢資料庫的方法，根據你們情況而寫。　　
        var searchList = service.findLikeTopic(name);

        List<String> list = new ArrayList<>();
        for (int i=0;i<topicSearchList.size();i++){
            list.add(topicSearchList.get(i).getTopic_title());
        }
        response.getWriter().write(JSONArray.fromObject(list).toString());
       
    }