JavaScript实现搜索框的自动完成功能(一)

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.

先给大家展示下效果图:

  实现这个功能需要服务端配合。

客户端通过脚本来展示从服务端取得的数据。


  先看客户端的HTML:

代码如下:


 
 
 

搜索词自动完成

服务端的代码,我们这里选择JSP,也可以使用PHP,服务端无所谓,关键是传送数据。


代码如下:


<%@ 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实现搜索框的自动完成功能(一),希望对大家有所帮助!

0.243654s