jquery的搜索框输入提示资源-CSDN文库

共3个文件

html：1个

css：1个

js：1个

5星 · 超过95%的资源需积分: 9 127 浏览量 2012-10-11 14:07:46 上传评论 9 收藏 28KB RAR 举报

在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。"jquery的搜索框输入提示"是一个基于jQuery实现的功能，它旨在提高用户体验，特别是在用户进行搜索时提供实时的建议或匹配结果。这个功能通常用于搜索引擎或者网站的搜索框，如百度和谷歌，当用户输入关键词时，会即时显示相关的搜索建议，帮助用户快速找到他们可能想要查找的内容。实现这个功能的关键在于关键词匹配和动态更新。我们需要一个HTML结构来创建搜索框，一般是一个`<input>`元素，可以监听用户的输入事件。当用户在搜索框中输入时，我们会捕获这个事件并触发一个JavaScript函数。 ```html <input type="text" id="searchBox" placeholder="请输入搜索内容..."> ``` 接下来，使用jQuery来绑定事件处理器： ```javascript $(document).ready(function() { $('#searchBox').on('input', function() { var keyword = $(this).val(); // 进行关键词匹配和处理 }); }); ``` 在事件处理器内部，我们获取用户输入的关键词，并使用这个关键词去匹配后台的数据。由于这个示例是模拟的，所以数据可能来自一个预定义的数组，而不是真正的服务器请求。如果是实际应用，通常会发送一个Ajax请求到后台，获取匹配的搜索建议： ```javascript var suggestions = ['匹配项1', '匹配项2', '匹配项3']; // 模拟数据 // 检查关键词是否匹配模拟数据 var matchedSuggestions = suggestions.filter(function(item) { return item.startsWith(keyword); }); // 显示匹配项 displaySuggestions(matchedSuggestions); ``` `displaySuggestions`函数会创建一个动态的列表，将匹配的搜索建议展示在搜索框下方。这通常通过操作DOM来实现，例如使用`<ul>`和`<li>`元素，或者利用CSS和HTML5的`<datalist>`元素。用户可以通过键盘的上下箭头选择建议项，也可以通过鼠标点击选择。 ```javascript function displaySuggestions(suggestions) { var suggestionList = $('#suggestionList'); suggestionList.empty(); // 清空现有建议 suggestions.forEach(function(item) { var li = $('<li>').text(item); li.on('click', function() { $('#searchBox').val(item); // 选中后设置搜索框值 suggestionList.empty(); // 隐藏建议列表 }); suggestionList.append(li); }); if (suggestions.length > 0) { suggestionList.show(); // 显示建议列表 } else { suggestionList.hide(); // 没有匹配项时隐藏 } } ``` 为了支持键盘导航，我们需要监听键盘事件，特别是上箭头和下箭头。通过修改CSS类或者JavaScript变量来跟踪当前选中的建议项。这个"基于jquery的搜索框输入提示"示例是一个基本的实现，实际项目中可能需要考虑更多细节，比如性能优化（例如使用debounce或throttle函数限制输入事件的频率），异步请求的错误处理，以及更复杂的匹配算法（如模糊匹配或智能排序）。此外，为了保证无障碍性，应确保功能对屏幕阅读器和其他辅助技术友好。

资源推荐

资源详情

资源评论

收起资源包目录

基于jquery的搜索框输入提示.rar （3个子文件）

基于jquery的搜索框输入提示

index.html 5KB

jquery-1.4.3.min.js 76KB

index.css 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>搜索</title> <meta name="description" content=" 内容介绍不超过100个中文"> <meta name="keywords" content=" 内容相关关键词3-5个"> <link href="index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.4.3.min.js"></script> </head> <body> <div class="gover_search"> <div class="gover_search_form clearfix"> <span class="search_t">关键词匹配搜索</span> <input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入关键词直接搜索" /> <button type="submit" class="search_btn">搜索</button> <div class="search_suggest" id="gov_search_suggest"> <ul> </ul> </div> </div> </div> <script type="text/javascript"> //实现搜索输入框的输入提示js类 function oSearchSuggest(searchFuc){ var input = $('#gover_search_key'); var suggestWrap = $('#gov_search_suggest'); var key = ""; var init = function(){ input.bind('keyup',sendKeyWord); input.bind('blur',function(){setTimeout(hideSuggest,100);}) } var hideSuggest = function(){ suggestWrap.hide(); } //发送请求，根据关键字到后台查询 var sendKeyWord = function(event){ //键盘选择下拉项 if(suggestWrap.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40){ var current = suggestWrap.find('li.hover'); if(event.keyCode == 38){ if(current.length>0){ var prevLi = current.removeClass('hover').prev(); if(prevLi.length>0){ prevLi.addClass('hover'); input.val(prevLi.html()); } }else{ var last = suggestWrap.find('li:last'); last.addClass('hover'); input.val(last.html()); } }else if(event.keyCode == 40){ if(current.length>0){ var nextLi = current.removeClass('hover').next(); if(nextLi.length>0){ nextLi.addClass('hover'); input.val(nextLi.html()); } }else{ var first = suggestWrap.find('li:first'); first.addClass('hover'); input.val(first.html()); } } //输入字符 }else{ var valText = $.trim(input.val()); if(valText ==''||valText==key){ return; } searchFuc(valText); key = valText; } } //请求返回后，执行数据展示 this.dataDisplay = function(data){ if(data.length<=0){ suggestWrap.hide(); return; } //往搜索框下拉建议显示栏中添加条目并显示 var li; var tmpFrag = document.createDocumentFragment(); suggestWrap.find('ul').html(''); for(var i=0; i<data.length; i++){ li = document.createElement('LI'); li.innerHTML = data[i]; tmpFrag.appendChild(li); } suggestWrap.find('ul').append(tmpFrag); suggestWrap.show(); //为下拉选项绑定鼠标事件 suggestWrap.find('li').hover(function(){ suggestWrap.find('li').removeClass('hover'); $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }).bind('click',function(){ input.val(this.innerHTML); suggestWrap.hide(); }); } init(); }; //实例化输入提示的JS,参数为进行查询操作时要调用的函数名 var searchSuggest = new oSearchSuggest(sendKeyWordToBack); //这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求 //参数为一个字符串，是搜索输入框中当前的内容 function sendKeyWordToBack(keyword){ /* var obj = { "keyword" : keyword }; $.ajax({ type: "POST", url: "${ctx}/front/suqiu2/search/prompt-keyword.action", async:false, data: obj, dataType: "json", success: function(data){ //var json = eval("("+data+")"); var key=data.split(","); var aData = []; for(var i=0;i<key.length;i++){ //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回 if(key[i]!=""){ aData.push(key[i]); } } //将返回的数据传递给实现搜索输入框的输入提示js类 searchSuggest.dataDisplay(aData); } }); */ //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回 var aData = []; aData.push(keyword+'返回数据1'); aData.push(keyword+'返回数据2'); aData.push(keyword+'不是有的人天生吃素的'); aData.push(keyword+'不是有的人天生吃素的'); aData.push(keyword+'2012是真的'); aData.push(keyword+'2012是假的'); //将返回的数据传递给实现搜索输入框的输入提示js类 searchSuggest.dataDisplay(aData); } </script> </body> </html>

评论收藏

内容反馈