<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String []words = {"amani","abc","apple","abstract","an","bike","byebye", "beat","be","bing","come","cup","class","calendar","china"}; if(request.getParameter("search-text") != null) { String key = request.getParameter("search-text"); if(key.length() != 0){ String json="["; for(int i = 0; i < words.length; i++) { if(words[i].startsWith(key)){ json += "\""+ words[i] + "\"" + ","; } } json = json.substring(0,json.length()-1>0?json.length()-1:1); json += "]"; System.out.println("json:" + json); out.println(json); } } %>
整个过程思路其实挺清晰的，首先在输入框上注册keyup事件，然后在事件中通过ajax获取json对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置，当浏览器的大小改变时，随时调整下拉列表的位置。
以上所述是小编给大家介绍的JavaScript实现搜索框的自动完成功能(一)，希望对大家有所帮助！
您可能感兴趣的文章: