JSuggest自動(dòng)匹配下拉框使用方法(示例代碼)
1.下載jquery-latest.js,JSuggest.js和JSuggest.css
JSuggest.js源代碼如下
/**
*
* Description : JSuggest 下拉提示框
*/
function JSuggest(){
// DIV下拉框
this.div = null;
// DIV下的ul
this.ul = null;
// 文本輸入框
this.input = null;
// 當(dāng)前DIV所選的LI對(duì)象
this.current_li = null;
/**
* 隱藏下拉提示框
*/
this.hide = function(){
this.div.style.visibility = "hidden";
}
/**
* 顯示下拉提示框
*/
this.show = function(){
this.div.style.visibility = "visible";
}
/**
* 下拉提示框狀態(tài)
*/
this.status = function(){
if (this.div.style.visibility == "visible"){
return true;
}
return false;
}
/**
* 設(shè)置當(dāng)前DIV所選的LI
*/
this.setCurrent_li = function(li, obj){
var co = obj.current_li;
if (co != null){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* 初始化Suggest
*
* input_id : 輸入框的ID
* defHeight: 下拉提示框的高(不提供也可以)
*/
this.init = function(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "off";
var left = this.input.offsetLeft;
var top = this.input.offsetTop;
var width = this.input.offsetWidth;
var height = this.input.offsetHeight;
var p=this.input.offsetParent;
while(p!= null){
left+=p.offsetLeft;
top+=p.offsetTop;
p=p.offsetParent;
}
top+= height;
if(defHeight==null || defHeight==0){
height = 150;
}else{
height = defHeight;
}
this.input.value = "";
var obj = this;
this.input.onkeydown = function(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = width + "px";
this.div.style.height = height + "px";
this.div.style.left = left + "px";
this.div.style.top = top + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
}
/**
* 移除DIV下UL中所有的LI
*/
this.remove = function(){
this.current_li = null;
while(this.removeLI());
}
/**
* 移除DIV下UL中的LI
*/
this.removeLI = function(){
var node = this.ul.childNodes;
for(var n in node){
if (node[n] != null && node[n].nodeName == "LI"){
// alert(node[n].innerHTML);
this.ul.removeChild(node[n]);
return true;
}
}
return false;
}
/**
* 在DIV中創(chuàng)建LI
*/
this.create = function(items){
this.remove();
var li_item = items.split(",");
for(var i in li_item){
//alert(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = this;
li.onmousedown = function(){
obj.onmousedown(this, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* 文本框按下事件
*/
this.onkeydown = function(evt, obj){
if (!obj.status()){
return false;
}
if (!evt && window.event)
{
evt = window.event;
}
var key = evt.keyCode;
//var KEYUP = 38;
//var KEYDOWN = 40;
//var KEYENTER = 13;
var ob = obj;
if (key == 38){
obj.upKeySelected();
}else if (key == 40){
obj.downKeySelected();
}else if (key == 13 || key == 27){
obj.hide();
}
}
this.getCurrentLiIndex = function(){
if(this.current_li == null){
return -1;
}
var node = this.ul.childNodes;
for(var n in node){
if (node[n].nodeName == "LI"){
if(node[n] == this.current_li){
return n;
}
}
}
}
this.getLi = function(index){
var node = this.ul.childNodes;
for(var n in node){
if (node[n].nodeName == "LI" && n == index){
this.setCurrent_li(node[n], this);
return node[n];
}
}
}
this.upKeySelected = function(){
var num = this.getCurrentLiIndex();
if (num != -1 && num > 0){
num--;
var node = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value = node.innerHTML;
}
}
this.downKeySelected = function(obj){
var num = this.getCurrentLiIndex();
if (num == -1){
num = 0;
}else {
num++;
if (num >= this.ul.childNodes.length)return false;
}
var node = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value = node.innerHTML;
}
/**
* DIV鼠標(biāo)按下事件
*/
this.onmousedown = function(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.hide();
}
/**
* DIV鼠標(biāo)移動(dòng)事件
*/
this.onmouseover = function(){
if (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* DIV鼠標(biāo)移出事件
*/
this.onmouseout = function(){
if (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = new JSuggest();
2.jsp頁(yè)面
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<script type="text/javascript">
j(document).ready(function(){
// 初始化JSUGGEST
jsuggest.init("text");
//或者用下面的方法,設(shè)置下拉框高度
//jsuggest.init("text",200);
})
function go(event, value){
event= event ? event : (window.event ? window.event : arguments[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url是具體的action或jsp地址等,返回值是以逗號(hào)分隔的字符串
goSuggestInput(event,url,value);
}
function goSuggestInput(evnet,url,value){
if (value == ""){
// 如果輸入框?yàn)榭针[藏下拉框
jsuggest.hide();
return false;
}
// 確保evt是一個(gè)有效的事件
if (!evnet && window.event)
{
evnet = window.event;
}
var key = evnet.keyCode;
if (key == 38 || key == 40 || key == 13 || key == 27){
return false;
}
j.ajax({
type: "post",
url:url,
dataType: "text",
cache: "false",
beforeSend: function(XMLHttpRequest){
},
success: function(data, textStatus){
// 對(duì)下拉框添加數(shù)據(jù)
jsuggest.create(data);
},
complete: function(XMLHttpRequest, textStatus){
},
error: function(){
alert("對(duì)不起,服務(wù)器忙!");
}
});
}
</script>
- inputSuggest文本框輸入時(shí)提示、自動(dòng)完成效果(郵箱輸入自動(dòng)補(bǔ)全插件)
- javascript suggest效果 自動(dòng)完成實(shí)現(xiàn)代碼分享
- suggestion開(kāi)發(fā)小結(jié)以及對(duì)鍵盤(pán)事件的總結(jié)(針對(duì)中文輸入法狀態(tài))
- ajax Suggest類(lèi)似google的搜索提示效果
- 仿google搜索提示 SuggestFramework的使用
- AJAX實(shí)現(xiàn)仿Google Suggest效果
- Google Suggest ;-) 基于js的動(dòng)態(tài)下拉菜單
- 有關(guān)suggest快速刪除后仍然出現(xiàn)下拉列表的bug問(wèn)題
相關(guān)文章
JavaScript控制兩個(gè)列表框listbox左右交換數(shù)據(jù)的方法
這篇文章主要介紹了JavaScript控制兩個(gè)列表框listbox左右交換數(shù)據(jù)的方法,實(shí)例分析了javascript操作列表框listbox的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03關(guān)于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題
這篇文章主要介紹了微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法
這篇文章主要介紹了后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法,實(shí)例分析了ZTREE中g(shù)etZTreeObj方法與getCheckedNodes方法的使用技巧,需要的朋友可以參考下2015-02-02JS清空上傳控件input(type="file")的值的代碼
最近做的一個(gè)小功能,需要清空<input type="file">的值,但上傳控件<input type="file">的值不能通過(guò)JavaScript來(lái)修改。2008-11-11分享15個(gè)JavaScript的重要數(shù)組方法
這篇文章主要介紹了分享15個(gè)JavaScript的重要數(shù)組方法,數(shù)組方法的重要一點(diǎn)是有些是可變的,有些是不可變的。在決定針對(duì)特定問(wèn)題使用哪種方法時(shí),務(wù)必牢記,下文就來(lái)分享重要數(shù)組方法,需要的小伙伴可以參考一下2022-05-05javaScript canvas實(shí)現(xiàn)(畫(huà)筆大小 顏色 橡皮的實(shí)例)
下面小編就為大家分享一篇javaScript canvas實(shí)現(xiàn)(畫(huà)筆大小 顏色 橡皮的實(shí)例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-11-11uni-file-picker文件選擇上傳功能實(shí)現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07