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.,
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事件 }
});
}