jquery_jquery를 기반으로 구현된 Baidu 검색과 유사한 입력 상자 자동 완성 기능-JS 튜토리얼-php.cn

jquery_jquery를 기반으로 구현된 Baidu 검색과 유사한 입력 상자 자동 완성 기능

WBOY

풀어 주다： 2016-05-16 18:03:20

원래의

1266명이 탐색했습니다.

더 이상 고민하지 않고 직관적으로 살펴보겠습니다.

이 기능을 구현하려면 서버의 협조가 필요합니다. 클라이언트는 스크립트를 통해 서버에서 얻은 데이터를 표시합니다.

먼저 클라이언트 HTML을 살펴보세요.

코드 복사 코드는 다음과 같습니다.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

搜索词自动完成

;

키워드를 입력하세요

서버측 코드의 경우 여기에서 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 if(words[i].startsWith(key)){ 
 json = " "" 단어[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 태그를 생성하고 태그에 클릭 이벤트를 등록하면 각 항목을 클릭할 때 해당 이벤트에 응답할 수 있습니다. 키보드 탐색의 핵심은 현재 강조 표시된 색인 값을 기록하고 색인 값에 따라 배경 강조 표시를 조정하는 것입니다. 드롭다운 목록의 위치는 입력 상자의 위치에 따라 설정되어야 하며, 브라우저 크기가 변경되면 언제든지 드롭다운 목록의 위치를 ​​조정할 수 있습니다. 
JQuery는 웹 프런트엔드를 위한 강력한 도구입니다. 기회가 된다면 꼭 살펴보세요. 