我们这里使用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()); ??????????}
原生AJAX+jsp+servlet实现百度搜索框提示效果
原文地址：https://www.cnblogs.com/aboutYouH/p/9944346.html