Ajax怎么做出智能搜索框的提示功能
这次给大家带来Ajax怎么做出智能搜索框的提示功能，Ajax做出智能搜索框提示功能的注意事项有哪些，下面就是实战案例，一起来看一下。
利用无刷新技术智能变换搜索框的提示，同百度搜索
效果图
其基本原理：
1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)
2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框下方的展示窗
如下为支持json的jar包
search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax搜索</title>
<script type="text/javascript">
//获得更多关联信息的函数
function getMore(){
var xmlHttp;
//首先获得用户的输入
var content = document.getElementById("keyword");
if(content.value==""){
keywordBlur();//执行一下清空方法，使搜索框在无数据的时候，下方残留数据也动态清空
return;
}
//alert(content.value);
//要给服务器发送用户输入的内容，要创建对象,叫XmlHttp对象
//xmlHttp=获得XmlHttp对象
xmlHttp=CreatXMLHttp();
//alert(xmlHttp);
//要给服务器发送数据
var url="serch?keyword="+escape(content.value);
//如果不用escape这个函数转化一下的话，传中文会有问题
//true表示javascript的脚本会在send()方法之后继续执行，而不会等待来自服务器的相应
xmlHttp.open("GET",url,true);
//xmlHttp绑定一个回调方法去接受服务器传来的相应,会在xmlHttp状态改变的时候被调用
//xmlHttp有0~4的状态，只关心4的方法
//4为complete状态，表示交互完成，当交互完成时才会调用回调方法
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);//send里面发送的是内容体，但参数在URL里已经都写完了
//回调函数==!!注意 这里回调方法要在方法内创建，因为创建的xmlHttp对象不是全局变量
//是在getMore()方法里创建的，可以将变量提取出来，变成全局变量
function callback(){
if (xmlHttp.readyState==4){
//200代表服务器相应成功。。。404代表资源未找到。。500服务器内部错误
if(xmlHttp.status==200){
//交互成功，获得相应的数据，是文本格式
var result=xmlHttp.responseText;
//解析json格式
var json=eval("("+result+")");//要在两边加个小括号，js才能认识
//获得数据之后就可以开始展示了。在输入框的下边展示
setContent(json);
}
}
}
//设置关联数据展示,参数代表的是服务器传递过来的关联数据
function setContent(contents){
//setLocation();//设置跟输入框一样宽度
keywordBlur();//在每次得到值之前先清空一下之前的残留数据
var size=contents.length;//根据关联的数据长度，来生成多少<tr>
//设置内容
for(var i=0;i<size;i++){
//不用appendChild()方法是因为不同浏览器可能不兼容该方法
var nextNode=contents[i];//代表json格式的第i个元素
var newRow=content_table_body.insertRow();//创建行
var newCell=newRow.insertCell();//创建单元格
newCell.innerHTML=contents[i];//将数据赋值给单元格
}
}
}
//获得XmlHttp对象
function CreatXMLHttp(){
//要考虑不同浏览器的写法
//大多数浏览器使用
var xmlHttpReq;
if(window.XMLHttpRequest){//火狐
xmlHttpReq=new XMLHttpRequest();
}else{
/* if(window.ActiveXObject){
xmlHttpReq=neww ActiveXObject("Microsoft.XMLHTTP");
//例如ie有很多版本，不一定能创建出来这个对象，所以要添加以下一个判断
//换一种方法，保证创建
if(!xmlHttp){
xmlHttpReq=new ActiveObject("Msxml2.XMLHTTP");
}
} */
//一定要如下格式写 上述格式火狐IE亲测不好使
try { //IE
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {//IE 浏览器
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
}
}
}
return xmlHttpReq;
}
//失去焦点的时候
function keywordBlur(){
//要获得body的元素长度，才能知道要遍历多少次
var contentTableBody=document.getElementById("content_table_body");
var size=contentTableBody.childNodes.length;
//因为是删除子节点，所以是从后往前才能删，同二叉树，删除子节点
for(var i=size-1;i>=0;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
document.getElementById("popp").style.border="none";
}
</script>
<style type="text/css">
/* #myp{
position: absolute;
left:30%;
top:50%;
margin-left: 100px;
} */
.mouseOver{
background: #708090;
color: #FFFAFA;
}
.mouseOut{
background: #FFFAFA;
color: #000000;
}
</style>
</head>
<body>
<p id="myp">
<!-- 输入框 -->
<input type="text" id="keyword" size="50" onblur="keywordBlur()" onkeyup="getMore()" onfocus="getMore()"/>
<input type="button" value="百度一下" wise="50px">
<!-- 下面是内容展示的区域 -->
<p id="popp">
<table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
<tbody id="content_table_body">
<!-- 这个是动态查询出来的数据显示的地方 -->
<!-- <tr><td>ajax1</td></tr>
<tr><td>ajax2</td></tr>
<tr><td>ajax3</td></tr> -->
</tbody>
</table>
</p>
</p>
</body>
</html>SearchServlet.class
package com.ninka;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet{
static List<String> datas = new ArrayList<String>();
static{
datas.add("ajax1");
datas.add("ajax2");
datas.add("ajax3");
datas.add("bichi1");
datas.add("bichi2");
datas.add("php");
datas.add("javascript");
datas.add("java");
datas.add("html");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置下编码格式
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
System.out.println("123");
//首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对，否则会空指针异常
String keyword = request.getParameter("keyword");
//获得关键字之后进行处理，得到关联数据
List<String> listData = getData(keyword);
//返回json格式
System.out.println(JSONArray.fromObject(listData));
//JSONArray.fromObject(listData);
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
//获得关联数据方法
public List<String> getData(String keyword){
List<String> list = new ArrayList<String>();
for(String data:datas){
//如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成list，向客户端传
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
}web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>ajaxtest</display-name> <welcome-file-list> <welcome-file>search.jsp</welcome-file> </welcome-file-list> <servlet> <!-- 为什么要用search？因为在js中定义url的时候写的是search --> <servlet-name>search</servlet-name> <servlet-class>com.ninka.SearchServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>search</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Ajax怎么做出智能搜索框的提示功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk mencari pengguna di Xianyu
Feb 24, 2024 am 11:25 AM
Bagaimanakah Xianyu mencari pengguna? Dalam perisian Xianyu, kami boleh mencari secara langsung pengguna yang kami ingin berkomunikasi dalam perisian. Tetapi saya tidak tahu cara mencari pengguna. Lihat sahaja di kalangan pengguna selepas mencari. Seterusnya ialah pengenalan yang editor bawa kepada pengguna tentang cara mencari pengguna Jika anda berminat, datang dan lihat! Bagaimana untuk mencari pengguna di Xianyu Jawapan: Lihat butiran di kalangan pengguna yang dicari Pengenalan: 1. Masukkan perisian dan klik pada kotak carian. 2. Masukkan nama pengguna dan klik Cari. 3. Kemudian pilih [Pengguna] di bawah kotak carian untuk mencari pengguna yang sepadan.
Cara menggunakan carian lanjutan Baidu
Feb 22, 2024 am 11:09 AM
Cara menggunakan Carian Terperinci Baidu Enjin carian Baidu kini merupakan salah satu enjin carian yang paling biasa digunakan di China. Ia menyediakan pelbagai fungsi carian, salah satunya ialah carian lanjutan. Carian lanjutan boleh membantu pengguna mencari maklumat yang mereka perlukan dengan lebih tepat dan meningkatkan kecekapan carian. Jadi, bagaimana untuk menggunakan carian lanjutan Baidu? Langkah pertama ialah membuka halaman utama enjin carian Baidu. Pertama, kita perlu membuka laman web rasmi Baidu, iaitu www.baidu.com. Ini adalah pintu masuk ke carian Baidu. Dalam langkah kedua, klik butang Carian Terperinci. Di sebelah kanan kotak carian Baidu, terdapat
Jadual WPS tidak dapat mencari data yang anda cari, sila semak lokasi pilihan carian
Mar 19, 2024 pm 10:13 PM
Dalam era yang dikuasai oleh kecerdasan, perisian pejabat juga telah menjadi popular, dan borang Wps diterima pakai oleh majoriti pekerja pejabat kerana fleksibiliti mereka. Di tempat kerja, kita dikehendaki bukan sahaja untuk belajar membuat borang yang mudah dan memasukkan teks, tetapi juga untuk menguasai lebih banyak kemahiran operasi untuk menyelesaikan tugasan dalam kerja sebenar Laporan dengan data dan menggunakan borang adalah lebih mudah, jelas dan tepat. Pelajaran yang kami bawa kepada anda hari ini ialah: Jadual WPS tidak dapat mencari data yang anda cari. Mengapa sila semak lokasi pilihan carian? 1. Mula-mula pilih jadual Excel dan klik dua kali untuk membukanya. Kemudian dalam antara muka ini, pilih semua sel. 2. Kemudian dalam antara muka ini, klik pilihan "Edit" dalam "Fail" dalam bar alat atas. 3. Kedua, dalam antara muka ini, klik "
Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX
Feb 20, 2024 am 10:07 AM
Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.
Bagaimana untuk mencari kedai di Taobao mudah alih Bagaimana untuk mencari nama kedai
Mar 13, 2024 am 11:00 AM
Perisian aplikasi Taobao mudah alih menyediakan banyak produk yang bagus Anda boleh membelinya pada bila-bila masa dan di mana-mana sahaja, dan semuanya adalah tulen. Anda boleh mencari dan membeli secara bebas mengikut kehendak anda. Bahagian produk dalam kategori yang berbeza semuanya terbuka pengguna menggunakannya untuk kali pertama Jika anda tidak tahu bagaimana untuk mencari produk, sudah tentu anda hanya perlu memasukkan kata kunci dalam bar carian untuk mencari semua hasil produk Anda tidak boleh berhenti membeli-belah editor akan menyediakan kaedah dalam talian terperinci untuk pengguna Taobao mudah alih mencari nama kedai. 1. Mula-mula buka aplikasi Taobao pada telefon bimbit anda,
Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403
Feb 19, 2024 pm 05:55 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403
Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?
Feb 23, 2024 pm 04:27 PM
Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
Huawei akan melancarkan sistem penderiaan Xuanji dalam bidang boleh pakai pintar, yang boleh menilai keadaan emosi pengguna berdasarkan kadar denyutan jantung
Aug 29, 2024 pm 03:30 PM
Baru-baru ini, Huawei mengumumkan bahawa ia akan melancarkan produk boleh pakai pintar baharu yang dilengkapi sistem penderiaan Xuanji pada bulan September, yang dijangka menjadi jam tangan pintar terbaru Huawei. Produk baharu ini akan menyepadukan fungsi pemantauan kesihatan emosi termaju Sistem Persepsi Xuanji menyediakan pengguna dengan penilaian kesihatan yang komprehensif dengan enam cirinya - ketepatan, kekomprehensif, kelajuan, fleksibiliti, keterbukaan dan skalabiliti. Sistem ini menggunakan modul penderiaan super dan mengoptimumkan teknologi seni bina laluan optik berbilang saluran, yang meningkatkan ketepatan pemantauan penunjuk asas seperti kadar jantung, oksigen darah dan kadar pernafasan. Selain itu, Sistem Penderiaan Xuanji juga telah mengembangkan penyelidikan mengenai keadaan emosi berdasarkan data kadar jantung Ia tidak terhad kepada penunjuk fisiologi, tetapi juga boleh menilai keadaan emosi dan tahap tekanan pengguna. Ia menyokong pemantauan lebih daripada 60 sukan penunjuk kesihatan, meliputi kardiovaskular, pernafasan, neurologi, endokrin,
