SearchFunction.js：
// JavaScript Document
/**
******************************************************************************************
搜索功能效果
******************************************************************************************
*/
//获取文本框的值
var SearchFunction = function(){
//创建文本框效果
var inputId;
function Search_plugin(params){
var SearchObj = document.getElementById(params.inputId);
var SearchTnput = document.createElement("input");
SearchTnput.className="inputText fl";
SearchTnput.style.width=params.width;
SearchTnput.id = "SearchTnput"+ params.inputId;
SearchObj.appendChild(SearchTnput);
//SearchTnput.focus();
//创建浮动面板效果
var list_index = -1;
SearchLable(params);
function SearchLable(params){
var panel_div = document.createElement("div");
panel_div.className = "topTishi";
panel_div.id = "Search_Floating_panel"+params.inputId;
panel_div.Common="Label"
panel_div.style.position = "absolute";
panel_div.style.display = "none";
var div_ul = document.createElement("ul");
div_ul.id="ul_id"+params.inputId;
var htmlD = '';
for (var i=0; i<params.titleArry.length;i++){
htmlD += '<li class="liTishi2 listitem" jqindex="' + i +'" jqid=' + params.titleArry[i]['site_id']
+' id="mess_center_' + params.inputId +'" >'+params.titleArry[i]['site_name']+'</li>'
}
div_ul.innerHTML=htmlD;
$(SearchObj).find('.topTishi').remove();
panel_div.appendChild(div_ul);
SearchObj.appendChild(panel_div);
$(SearchObj).find('.listitem').bind('mouseover', function(){
this.style.background='#ccffff';
list_index = $(this).attr('jqindex');
}).bind('mouseout', function(){
this.style.background='#ffffff';
list_index = $(this).attr('jqindex');
}).bind('click', function(){
SearchTnput.value = this.innerHTML;
if(params.click){
params.click($(this).attr('jqid'));
}
});
var y=0;
var x=0;
var onj =SearchTnput;
y = SearchTnput.offsetTop;
x = SearchTnput.offsetLeft;
while (onj = onj.offsetParent) {
x += onj.offsetLeft;
y += onj.offsetTop;
}
var selectWidth = SearchTnput.offsetWidth;
var selectHeight = SearchTnput.offsetHeight;
panel_div.style.width = selectWidth-2+"px";
panel_div.style.top = y + selectHeight+"px";
panel_div.style.left = x +"px";
}
/**
* 1.事件的绑定（键盘事件）
* 2.
*
*/
$(document).click(function(e){
if(e.target == SearchTnput)return;
$('.topTishi').hide();
});
/*
是功能键效果
*/
$('#' + "SearchTnput"+ params.inputId).bind('keyup', function(e){
/*
判断是否是功能键
*/
var style_div = $(SearchObj).find('.topTishi') ;
var self= this;
var size=style_div.find("li").size();
var fn = function(index, isUpdate){
style_div.find("li").css("background","#ffffff");
style_div.find("li").eq(index).css("background","#ccffff");
if(isUpdate === true)self.value = style_div.find("li").eq(index).html();
}
fn(list_index);
switch(e.keyCode){
case 38://up
list_index--;
if(list_index < 0)list_index = size - 1;
fn(list_index, true);
return;
break;
case 40://down
list_index++;
if(list_index >= size )list_index = -1;
fn(list_index, true);
return;
break;
}
var reg = /^\s+|\s+$/;
var val= this.value;
val = val.replace(reg,'');
/*
1.判断当前keyCode是否为回车键
2.取出当前搜索框中的数据
3.与服务器传递过来的列表数据比对，遍历列表，如果存在相同的数据，则取出这个id，并且执行回调事件，跳出循环
*/
if(e.keyCode== 13){
var flag = false;
for (var i=0; i<params.titleArry.length;i++){
if(val==params.titleArry[i]['site_name']){
flag = params.titleArry[i]['site_id'];
break;
}
}
if(false === flag){
params.keyCode(0);
}else{
params.keyCode(flag);
}
}
var panel = $(SearchObj).find('.topTishi');
if(val !== ''){
$.ajax({
url:params.url,
type:"POST",
dataType:'json',
data:{//php传值不需要用function()，只需要用数组即可，就是去掉function().
limit :10,
keyword:val
},
success:function(data){
var obj = params;
obj.titleArry = data;
//*返回server数据
SearchLable(obj);
style_div = $(SearchObj).find('.topTishi');
style_div.show();
}
})
}else{
panel.hide();
}
});
};
return {
Search_plugin: function(params){
Search_plugin(params);
}
}
}()
Search.css：
@charset "utf-8";
/* CSS Document */
.inputText{border:1px solid #cccccc;border-right:none;height:24px;padding:0 5px; line-height:24px;}
.topTishi{width:176px;border:1px solid #CCC; position:absolute;background:#fff;top:25px;left:5px; text-align:left; display:none}
.topTishi ul{margin:0; padding:0;overflow:hidden;width:100%}
.topTishi ul li{width:97%;height:24px; line-height:24px;cursor:default;padding-left:5px;overflow:hidden;margin:0;margin:0;}
server.json文件：
[{"site_id":"236","site_name":"\u5317\u4eac\u6d77\u6dc0\u533a"},{"site_id":"318","site_name":"\u5317\u4eac\u7ad9"},{"site_id":"383","site_name":"\u5317\u4eac\u5927\u5b66"}]
JS的配置方法如下所示：
window.onload = function(){
SearchFunction.Search_plugin({
inputId:"id", //页面中定位搜索文本框的id
width:"168px", //搜索文本框的宽度
url : 'server.json', //建立服务server.json文件，然后再其中传搜索到的数据，即一个数组，如；['数据1','数据2','数据3,'数据4','数据5','数据6']
titleArry:'”” //工具引用的输入搜索数据的数据，配置直接为空即可；
click:function(id){//点击每个选项的时候触发的事件
},
keyCode:function(id){ //判断是搜索的内容在选项中是否存在，然后给予的enter事件 }
});
}
