社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 正文

输入自动提示搜索提示功能的javascript:sugggestion.js_javascript技巧

WBOY
发布： 2016-05-16 17:23:53
原创
1034 人浏览过
复制代码 代码如下:

/**
* 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验
* 使用说明:参见suggestions.txt文件
* Author:sunfei(孙飞) Date:2013.08.21
*/
var SugObj = new Object();

$(document).ready(function(){

//文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示效果保持一致
//使用搜索提示功能输入框默认ID
SugObj.keywords_input_id = "keywords_input";
//搜索输入框高度
SugObj.keywords_input_height = $("#"+SugObj.keywords_input_id+"").height();
//搜索输入框宽度
SugObj.keywords_input_width = $("#"+SugObj.keywords_input_id+"").width();
//搜索输入框宽度字体颜色
SugObj.keywords_input_color = $("#"+SugObj.keywords_input_id+"").css("color");
//搜索输入框宽度字体大小
SugObj.keywords_input_font_size = $("#"+SugObj.keywords_input_id+"").css("font-size");
//用户输入的值
SugObj.keywords_input_value = null;

//设置显示搜索提示div的样式
//显示提示信息的DIV的ID
SugObj.suggestion_div_id = "sug_layer_div";
//默认的提示信息DIV样式
$("#"+SugObj.suggestion_div_id+"").addClass("sugLayerDiv");
//根据输入框设置DIV宽度
$("#"+SugObj.suggestion_div_id+"").css("width",SugObj.keywords_input_width);
//$("#"+SugObj.suggestion_div_id+"").css("position","relative");
//$("#"+SugObj.suggestion_div_id+"").css("overflow","hidden");//DIV 内容溢出时隐藏
//$("#"+SugObj.suggestion_div_id+"").css("background","#fff");//DIV 背景颜色
//$("#"+SugObj.suggestion_div_id+"").css("border","#c5dadb 1px solid");//DIV 边框样式
//$("#"+SugObj.suggestion_div_id+"").css("display","none");//DIV 初始隐藏

//提示结果默认显示提示数目
SugObj.default_showItem_count = 10;
//设定点击"more"所显示数目
SugObj.more_showItem_count = 20;
//标记上下键时所处位置
SugObj.cursor_now_position = -1;
});


//性能考虑:如果用户每输入一个字母就立即往服务器传的的话，服务器的承载就会过大，
//于是考虑可以将每次请求延迟0.5s发送(待考虑)

$(document).ready(function(){

//输入框的id为keywords_input，这里监听输入框的keyup事件
$("#"+SugObj.keywords_input_id+"").keyup(function(event){
if((event.keyCode >= 48 && event.keyCode = 96 && event.keyCode (event.keyCode >= 65 && event.keyCode //获取输入框的值ֵ
var kw = $("#"+SugObj.keywords_input_id+"").val();
//去掉输入字符串两端的空格
kw = kw.replace(/(^\s*)|(\s*$)/g,"");
if (kw == "") {
//清空DIV内容
$("#"+SugObj.suggestion_div_id+"").empty();
//隐藏DIV
$("#"+SugObj.suggestion_div_id+"").css("display","none");
} else {
//将用户输入值保存到SugObj对象中
SugObj.keywords_input_value = kw;
//运行Ajax请求结果
runSearchAjax(0);
}
}else if(event.keyCode == 38) { //Up Arrow
if (--SugObj.cursor_now_position == -1) {//判断自减一后是否已移到文本框
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);
//去掉提示结果的样式 #fff-白色
$("#showDataTable tr.line").css("background","#fff");
}else if(SugObj.cursor_now_position == -2) {//已在文本框后按Up-Arrow移到最后一行
//搜索提示结果索引从0开始
var index = $("#showDataTable tr.line").length - 1;
//搜索提交结果为0,则返回
if (index return;
}
//取最后一个提示结果
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[index]).text());
$($("#showDataTable tr.line")[index]).siblings().css("background","#fff").end().css("background","#c0c0c0");
SugObj.cursor_now_position = index;
}else {
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text());
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");
}
}else if(event.keyCode == 40) { //Down Arrow
var trCount = $("#showDataTable tr.line").length;
if (++SugObj.cursor_now_position == trCount) {//判断加一操作后cursor_now_position值是否超出列表数目界限
//超出的话就将cursor_now_position值变为初始值
SugObj.cursor_now_position = -1;
//并将文本框中值设为用户用于搜索
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);
//去掉提示结果的样式
$("#showDataTable tr").css("background","#fff");
}else {
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text()); //将当前结果显示在输入框中
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");
}
}//End if
});

//光标离开输入框时隐藏搜索提示
$("#"+SugObj.keywords_input_id+"").blur(function(){

var intId = window.setInterval(function(){
$("#"+SugObj.suggestion_div_id+"").css("display","none");
window.clearInterval(intId);
},200);

$("#"+SugObj.suggestion_div_id+" tr.line").click(function(){
window.clearInterval(intId);
$("#"+SugObj.keywords_input_id+"").val($(this).text());
$("#"+SugObj.keywords_input_id+"").focus();
SugObj.cursor_now_position = -1;
runSearchAjax(0);
});

$("#"+SugObj.suggestion_div_id+" tr.moreline").click(function(){
window.clearInterval(intId);
$("#"+SugObj.keywords_input_id+"").focus();
SugObj.cursor_now_position = -1;
runSearchAjax(1);
});
});

});

//isMore为1:多于二十条则只显示二十条,少于二十条,则有多少显示多少
//isMore为0:多于十条则只显示十条,少于十条,则有多少显示多少
function runSearchAjax(isMore) {
$.ajax({
type:"GET",
dataType:"json",
url:$("#"+SugObj.keywords_input_id+"").attr("searchURL"),
data:{
"keywords_input":escape($("#"+SugObj.keywords_input_id+"").val())
},
success:function(data,status) {
if (data.sugList == null || data.sugList == undefined || data.sugList.length == 0) {
$("#"+SugObj.suggestion_div_id+"").empty();
$("#"+SugObj.suggestion_div_id+"").css("display","none");
} else {
//var result = $.parseJSON(data.sugList);
var result = data.sugList;
var dataArray = [];
$.each(result,function(i,value){
dataArray.push(value);
});
//获取记录的个数
var dataItemLength = dataArray.length;
if (dataItemLength return; //搜索提交结果为0,则返回
}

var layerLabel = [];
layerLabel.push(" ");//创建一个table
if (isMore == 0) {
if (dataItemLength for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}else{
for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' >");
}
layerLabel.push(" layerLabel.push(" class='moreline'> ");
}
}else if (isMore == 1) {
if (dataItemLength for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}else{
for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}
}else{
for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}
layerLabel.push("
"+dataArray[i]+"
"+dataArray[i]+"
");
layerLabel.push(" more...
"+dataArray[i]+"
"+dataArray[i]+"
"+dataArray[i]+"
");
var layer = layerLabel.join("");
//显示DIV
$("#"+SugObj.suggestion_div_id+"").css("display","block");
//先清空#searchResult下的所有子元素
$("#"+SugObj.suggestion_div_id+"").empty();
//将刚创建的table插入到#searchResult内
$("#"+SugObj.suggestion_div_id+"").append(layer);
$("#showDataTable tr").css("color",SugObj.keywords_input_color);
$("#showDataTable tr").css("font-size",SugObj.keywords_input_font_size);
//监听提示框的鼠标悬停事件
$("tr.line").hover(function(){
$("tr.line").css("background","#fff");
$(this).css("background","#c0c0c0");
},function(){
$(this).css("background","#fff");
});
}
}
});
}

//输入框的坐标发生变化
function ChangeCoords() {
//获取距离最左端的距离，像素，整型
var left = $("#"+SugObj.keywords_input_id+"").offsetLeft;
//获取距离最顶端的距离，像素，整型
var top = $("#"+SugObj.keywords_input_id+"").offsetTop+keywords_input_height;
//重新定义CSS属性
$("#"+SugObj.suggestion_div_id+"").css("left",left+"px");
$("#"+SugObj.suggestion_div_id+"").css("top",top+"px");
}

//监听搜索提示结果的鼠标单击事件
function hoverAction(data) {
//隐藏搜索提示DIV
$("#"+SugObj.suggestion_div_id+"").css("display","none");
//将点击数据加入到搜索提示输入框中
$("#"+SugObj.suggestion_div_id+"").val(data);
//将光标聚焦在搜索提示输入框中
$("#"+SugObj.suggestion_div_id+"").focus();
//将cursor_now_position值变为初始值
cursor_now_position = -1;
//运行Ajax方法,向服务器发送请求
runSearchAjax(0);
}

//窗体的大小改变会触发resize()事件，只需在该事件内调用ChangeCoords()方法即可
$(window).resize(ChangeCoords);
相关标签：
自动提示
来源：php.cn
上一篇：输入自动提示搜索提示功能的使用说明:sugggestion.txt_javascript技巧 下一篇：文本有关的样式和jQuery求对象的高宽问题分别说明_jquery
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
PX自动转换为REM错误  <style>html {   字体大小：calc(100vw / 3.75);      }body {    字体大小：0.16rem；      }</s...
来自于 2024-04-16 09:34:16
0
0
4687
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
来自于 2024-04-06 22:01:35
0
3
816
使用具有 3 级层次结构的自定义分类法选择 woocommerce 相关产品 我有一家woocommerce商店，其自定义分类为“运动”。该分类具有三个级别-父级、子级、子级-例如：室内运动>竞技场运动>篮球。如果用户查看篮球项目，那么我希望相关...
来自于 2024-04-06 20:05:30
0
1
544
在网络应用程序中显示版本信息的最佳实践是什么？ 我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...
来自于 2024-04-06 19:13:16
0
2
476
React子元素无效（发现：具有键{clientVersion}的对象）。如果您想渲染一个子元素集合，请使用数组代替 我有一个多步骤表单，当我尝试提交时会显示此错误。但是，如果我以简单的形式使用createOrganization调度，它就会起作用。是后端问题还是前端问题？我可能做错了什么？我希望...
来自于 2024-04-06 16:25:39
0
1
346
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板