JS仿百度搜索自動提示框匹配查詢功能
1. 添加動態(tài)加載css文件 不需要引入css css全部在JS動態(tài)生成。
2. 不需要額外的標簽 只需要一個input輸入框 并且默認指定一個class類名為 "inputElem" 當然也可以自己配置參數(shù) 還需要一個當前父級容器增加一個默認類名 parentCls(也可以自己配置)，因為輸入框匹配值后需要一個隱藏域 所以需要隱藏域增加一個class "hiddenCls" 當然也支持自己配置參數(shù)。
如下代碼：
<div class="parentCls">
<div style="width:200px;height:26px;border:1px solid #ccc;">
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
</div>
<input type="hidden" class="hiddenCls"/>
</div>
<div class="parentCls">
<div style="width:200px;height:26px;border:1px solid #ccc;">
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
</div>
<input type="hidden" class="hiddenCls"/>
</div>
3. 支持頁面上有多個輸入框。
4. 支持鼠標點擊和 鍵盤 上移和下移鍵操作 類似于百度輸入框。
頁面上所有的標簽都是動態(tài)的生成的，不需要額外的標簽。如上面的 只需要input標簽 其他的div標簽不依賴 只需要父級元素增加class "parentCls"（當然可以自己配置類名），
及要傳給后臺開發(fā)人員的隱藏域輸入框 增加一個class "hiddenCls" 當然也可以自動配置參數(shù)。
我的模糊查詢匹配的需求是這樣的：
1. 每keyup時候 點擊或者鍵盤上移下移操作 輸入框填充用戶名/工號 隱藏域填充工號 發(fā)請求 服務器返回數(shù)據(jù) 渲染出來。當然 隱藏域填充工號 值是form表單提交時候 后臺要拿到提交過來的工號 所以需要這么一個隱藏域。
2. 當用戶直接在輸入框輸入值時候 并沒有鍵盤上移下移 或者 點擊下拉框某一項時候 當鼠標失去焦點時候(blur) 當前輸入框值為空 隱藏域值為空，這樣做的目的 是為了防止上次form提交過后的數(shù)據(jù)仍然保存在隱藏域里面 當用戶重新輸入的時候 用戶也并沒有操作鍵盤上下移操作或者點擊操作 再點擊提交按鈕時(失去焦點)，那么值為空 隱藏域值為空 這樣防止搜索出來不是用戶輸入的那個東東。
3. 當用戶點擊某一項時候 或者 上移下移時候 輸入框動態(tài)的生成值 且輸入框值現(xiàn)在不能重新輸入 只有當點擊輸入框x的時候 才可以重新輸入。
4. 已經(jīng)遺留輸入框可以多選的接口 目前還未完善輸入框多選的操作。
5. 禁止ctrl+v 或者右鍵 粘貼操作。
下面HTML代碼如下：
<div class="parentCls">
<div style="width:200px;height:26px;border:1px solid #ccc;">
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
</div>
<input type="hidden" class="hiddenCls"/>
</div>
<div class="parentCls">
<div style="width:200px;height:26px;border:1px solid #ccc;">
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
</div>
<input type="hidden" class="hiddenCls"/>
</div>
<input type="button" value="提交"/>
JS代碼如下：
/**
* JS 模糊查詢
* @author tugenhua
* @date 2013-11-19
* @param 1.當前的input add targetCls
* 2. 隱藏域里面統(tǒng)一增加同類名 叫 hiddenCls
* 3. 在各個父級元素上 添加類名 parentCls
*/
function AutoComplete (options) {
this.config = {
targetCls : '.inputElem', // 輸入框目標元素
parentCls : '.parentCls', // 父級類
hiddenCls : '.hiddenCls', // 隱藏域input
searchForm :'.jqtransformdone', //form表單
hoverBg : 'hoverBg', // 鼠標移上去的背景
outBg : 'outBg', // 鼠標移下拉的背景
isSelectHide : true, // 點擊下拉框 是否隱藏
url : '', // url接口
height : 0, // 默認為0 不設置的話 那么高度自適應
manySelect : false, // 輸入框是否多選 默認false 單選
renderHTMLCallback : null, // keyup時 渲染數(shù)據(jù)后的回調(diào)函數(shù)
callback : null, // 點擊某一項 提供回調(diào)
closedCallback : null // 點擊輸入框某一項x按鈕時 回調(diào)函數(shù)
};
this.cache = {
currentIndex : -1,
oldIndex : -1,
inputArrs : [] // 多選時候 輸入框值放到數(shù)組里面去
};
this.init(options);
}
AutoComplete.prototype = {
constructor: AutoComplete,
init: function(options) {
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config,
_cache = self.cache;
// 鼠標點擊輸入框時候
$(_config.targetCls).each(function(index,item) {
/*
* 禁止 ctrl+v 和 黏貼事件
*/
$(item).unbind('paste');
$(item).bind('paste',function(e){
e.preventDefault();
var target = e.target,
targetParent = $(target).closest(_config.parentCls);
$(this).val('');
$(_config.hiddenCls,targetParent) && $(_config.hiddenCls,targetParent).val('');
});
$(item).keyup(function(e){
_cache.inputArrs = [];
var targetVal = $.trim($(this).val()),
keyCode = e.keyCode,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth();
// 如果輸入框值為空的話 那么隱藏域的value清空掉
if(targetVal == '') {
var curParents = $(this).closest(_config.parentCls);
$(_config.hiddenCls,curParents).val('');
}
var targetParent = $(this).parent();
$(targetParent).css({'position':'relative'});
if($('.auto-tips',targetParent).length == 0) {
// 初始化時候 動態(tài)創(chuàng)建下拉框容器
$(targetParent).append($('<div class="auto-tips hidden"></div>'));
$('.auto-tips',targetParent).css({'position':'absolute','top':elemHeight,'left':'0px','z-index':999,'width':elemWidth,'border':'1px solid #ccc'});
}
var curIndex = self._keyCode(keyCode);
if(curIndex > -1){
self._keyUpAndDown(targetVal,e,targetParent);
}else {
if(targetVal != '') {
self._doPostAction(targetVal,targetParent);
}
}
});
// 失去焦點時 如果沒有點擊 或者上下移時候 直接輸入 那么當前輸入框值情況 隱藏域值情況
$(item).blur(function(e){
var target = e.target,
targetParent = $(target).closest(_config.parentCls);
if($(this).attr('up') || $(this).attr('down')) {
return;
}else {
$(this).val('');
$(_config.hiddenCls,targetParent).val('');
}
});
});
// 阻止form表單默認enter鍵提交
$(_config.searchForm).each(function(index,item) {
$(item).keydown(function(e){
var keyCode = e.keyCode;
if(keyCode == 13) {
return false;
}
});
});
// 點擊文檔
$(document).click(function(e){
e.stopPropagation();
var target = e.target,
tagParent = $(target).parent(),
attr = $(target,tagParent).closest('.auto-tips');
var tagCls = _config.targetCls.replace(/^\./,'');
if(attr.length > 0 || $(target,tagParent).hasClass(tagCls)) {
return;
}else {
$('.auto-tips').each(function(index,item){
!$(item,tagParent).hasClass('hidden') && $(item,tagParent).addClass('hidden');
});
}
});
var stylesheet = '.auto-tips { margin: 0 1px; list-style: none;height:auto !important;padding: 0px;position:absolute; border:1px solid #ccc; top:27px; left:0; z-index:999; width:100%;background:#fff !important;}' +
'.auto-tips p {overflow: hidden;margin: 1px 0;padding: 5px 5px;border-bottom: 1px solid #e7e7e7;color: #666;text-decoration: none;line-height: 23px;white-space: nowrap;cursor: pointer;zoom: 1;}' +
'.auto-tips p img{ vertical-align:middle;float:left;}' +
'.create-input{line-height:26px,padding-left:3px;}' +
'.create-input span{margin-top:1px;height:24px;float:left;}' +
'.create-input span i,.auto-tips span a{font-style:normal;float:left;cursor:default;}' +
'.create-input span a{padding:0 8px 0 3px;cursor:pointer;}' +
'.auto-tips p.hoverBg {background-color: #669cb6;color: #fff;cursor: pointer;}' +
'.hidden {display:none;}';
this._addStyleSheet(stylesheet);
},
/**
* 鍵盤上下鍵操作
*/
_keyUpAndDown: function(targetVal,e,targetParent) {
var self = this,
_cache = self.cache,
_config = self.config;
// 如果請求成功后 返回了數(shù)據(jù)(根據(jù)元素的長度來判斷) 執(zhí)行以下操作
if($('.auto-tips p',targetParent) && $('.auto-tips p',targetParent).length > 0) {
var plen = $('.auto-tips p',targetParent).length,
keyCode = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
// 上移操作
if(keyCode == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}else {
_cache.currentIndex = _cache.currentIndex - 1;
if(_cache.currentIndex < 0) {
_cache.currentIndex = plen - 1;
}
}
if(_cache.currentIndex !== -1) {
!$('.auto-tips .p-index'+_cache.currentIndex,targetParent).hasClass(_config.hoverBg) &&
$('.auto-tips .p-index'+_cache.currentIndex,targetParent).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
var curAttr = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('data-html'),
embId = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('embId');
// 判斷是否是多選操作 多選操作 暫留接口
if(_config.manySelect) {
_cache.inputArrs.push(curAttr);
_cache.inputArrs = self._unique(_cache.inputArrs);
self._manySelect(targetParent);
}else {
$(_config.targetCls,targetParent).val(curAttr);
// 上移操作增加一個屬性 當失去焦點時候 判斷有沒有這個屬性
if(!$(_config.targetCls,targetParent).attr('up')){
$(_config.targetCls,targetParent).attr('up','true');
}
var pCls = $(_config.targetCls,targetParent).closest(_config.parentCls);
$(_config.hiddenCls,pCls).val(embId);
self._createDiv(targetParent,curAttr);
self._closed(targetParent);
// hover
self._hover(targetParent);
}
}
}else if(keyCode == 40) { //下移操作
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}else {
_cache.currentIndex++;
if(_cache.currentIndex > plen - 1) {
_cache.currentIndex = 0;
}
}
if(_cache.currentIndex !== -1) {
!$('.auto-tips .p-index'+_cache.currentIndex,targetParent).hasClass(_config.hoverBg) &&
$('.auto-tips .p-index'+_cache.currentIndex,targetParent).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
var curAttr = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('data-html'),
embId = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('embId');
// 判斷是否是多選操作 多選操作 暫留接口
if(_config.manySelect) {
_cache.inputArrs.push(curAttr);
_cache.inputArrs = self._unique(_cache.inputArrs);
self._manySelect(targetParent);
}else {
$(_config.targetCls,targetParent).val(curAttr);
// 下移操作增加一個屬性 當失去焦點時候 判斷有沒有這個屬性
if(!$(_config.targetCls,targetParent).attr('down')){
$(_config.targetCls,targetParent).attr('down','true');
}
var pCls = $(_config.targetCls,targetParent).closest(_config.parentCls);
$(_config.hiddenCls,pCls).val(embId);
self._createDiv(targetParent,curAttr);
self._closed(targetParent);
// hover
self._hover(targetParent);
}
}
}else if(keyCode == 13) { //回車操作
var curVal = $('.auto-tips .p-index'+_cache.oldIndex,targetParent).attr('data-html');
$(_config.targetCls,targetParent).val(curVal);
if(_config.isSelectHide) {
!$(".auto-tips",targetParent).hasClass('hidden') && $(".auto-tips",targetParent).addClass('hidden');
}
_cache.currentIndex = -1;
_cache.oldIndex = -1;
}
}
},
// 鍵碼判斷
_keyCode: function(code) {
var arrs = ['17','18','38','40','37','39','33','34','35','46','36','13','45','44','145','19','20','9'];
for(var i = 0, ilen = arrs.length; i < ilen; i++) {
if(code == arrs[i]) {
return i;
}
}
return -1;
},
_doPostAction: function(targetVal,targetParent) {
var self = this,
_cache = self.cache,
_config = self.config,
url = _config.url;
// 假如返回的數(shù)據(jù)如下：
var results = [{lastName:'tugenhua',emplId:'E0987',image:''},{lastName:'tugenhua',emplId:'E0988',image:''},{lastName:'tugenhua',emplId:'E0989',image:''}];
self._renderHTML(results,targetParent);
self._executeClick(results,targetParent);
/** $.get(url+"?keyword="+targetVal+"×tamp="+new Date().getTime(),function(data){
var ret = $.parseJSON(data.content),
results = ret.results;
if(results.length > 0) {
self._renderHTML(results,targetParent);
self._executeClick(results,targetParent);
}else {
!$('.auto-tips',targetParent).hasClass('hidden') && $('.auto-tips',targetParent).addClass("hidden");
$('.auto-tips',targetParent).html('');
}
});**/
},
_renderHTML: function(ret,targetParent) {
var self = this,
_config = self.config,
_cache = self.cache,
html = '';
for(var i = 0, ilen = ret.length; i < ilen; i+=1) {
html += '<p data-html = "'+ret[i].lastName+'('+ret[i].emplId+')" embId="'+ret[i].emplId+'" class="p-index'+i+'">' +
'<img src="'+ret[i].image+'" style="margin-right:5px;" height="25" width="25" title="" alt="">' +
'<span>'+ret[i].lastName+'('+ret[i].emplId+')</span>' +
'</p>';
}
// 渲染值到下拉框里面去
$('.auto-tips',targetParent).html(html);
$('.auto-tips',targetParent).hasClass('hidden') && $('.auto-tips',targetParent).removeClass('hidden');
$('.auto-tips p:last',targetParent).css({"border-bottom":'none'});
_config.renderHTMLCallback && $.isFunction(_config.renderHTMLCallback) && _config.renderHTMLCallback();
// 出現(xiàn)滾動條 計算p的長度 * 一項p的高度 是否大于 設置的高度 如是的話 出現(xiàn)滾動條 反之
var plen = $('.auto-tips p',targetParent).length,
pheight = $('.auto-tips p',targetParent).height();
if(_config.height > 0) {
if(plen*pheight > _config.height) {
$('.auto-tips',targetParent).css({'height':_config.height,'overflow':'auto'});
}else {
$('.auto-tips',targetParent).css({'height':'auto','overflow':'auto'});
}
}
},
/**
* 當數(shù)據(jù)相同的時 點擊對應的項時 返回數(shù)據(jù)
*/
_executeClick: function(ret,targetParent) {
var self = this,
_config = self.config,
_cache = self.cache;
$('.auto-tips p',targetParent).unbind('click');
$('.auto-tips p',targetParent).bind('click',function(e){
var dataAttr = $(this).attr('data-html'),
embId = $(this).attr('embId');
// 判斷是否多選
if(_config.manySelect) {
_cache.inputArrs.push(dataAttr);
_cache.inputArrs = self._unique(_cache.inputArrs);
self._manySelect(targetParent);
}else {
$(_config.targetCls,targetParent).val(dataAttr);
var parentCls = $(_config.targetCls,targetParent).closest(_config.parentCls),
hiddenCls = $(_config.hiddenCls,parentCls);
$(hiddenCls).val(embId);
self._createDiv(targetParent,dataAttr);
// hover
self._hover(targetParent);
!$(_config.targetCls,targetParent).hasClass('hidden') && $(_config.targetCls,targetParent).addClass('hidden');
}
self._closed(targetParent);
if(_config.isSelectHide) {
!$('.auto-tips',targetParent).hasClass('hidden') && $('.auto-tips',targetParent).addClass('hidden');
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
// 鼠標移上效果
$('.auto-tips p',targetParent).hover(function(e){
!$(this,targetParent).hasClass(_config.hoverBg) &&
$(this,targetParent).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
});
},
_hover: function(targetParent){
$('.create-input span',targetParent).hover(function(){
$(this).css({"background":'#ccc','padding-left':'0px'});
},function(){
$(this).css({"background":''});
});
},
// 動態(tài)的創(chuàng)建div標簽 遮住input輸入框
_createDiv: function(targetParent,dataAttr){
var self = this,
_config = self.config;
var iscreate = $('.create-input',targetParent);
// 確保只創(chuàng)建一次div
if(iscreate.length > 0) {
$('.create-input',targetParent).remove();
}
$(targetParent).prepend($('<div class="create-input"><span><i></i></span></div>'));
$('.create-input span i',targetParent).html(dataAttr);
$(_config.targetCls,targetParent).val(dataAttr);
$('.create-input span',targetParent).append('<a class="alink">X</a>');
$('.alink',targetParent).css({'float':'left','background':'none'});
},
// X 關閉事件
_closed: function(targetParent){
var self = this,
_config = self.config;
/*
* 點擊X 關閉按鈕
* 判斷當前輸入框有沒有up和down屬性 有的話 刪除掉 否則 什么都不做
*/
$('.alink',targetParent).click(function(){
$('.create-input',targetParent) && $('.create-input',targetParent).remove();
$(_config.targetCls,targetParent) && $(_config.targetCls,targetParent).hasClass('hidden') &&
$(_config.targetCls,targetParent).removeClass('hidden');
$(_config.targetCls,targetParent).val('');
//清空隱藏域的值
var curParent = $(_config.targetCls,targetParent).closest(_config.parentCls);
$(_config.hiddenCls,curParent).val('');
var targetInput = $(_config.targetCls,targetParent);
if($(targetInput).attr('up') || $(targetInput).attr('down')) {
$(targetInput).attr('up') && $(targetInput).removeAttr('up');
$(targetInput).attr('down') && $(targetInput).removeAttr('down');
}
_config.closedCallback && $.isFunction(_config.closedCallback) && _config.closedCallback();
});
},
/*
* 數(shù)組去重復
*/
_unique: function(arrs) {
var obj = {},
newArrs = [];
for(var i = 0, ilen = arrs.length; i < ilen; i++) {
if(obj[arrs[i]] != 1) {
newArrs.push(arrs[i]);
obj[arrs[i]] = 1;
}
}
return newArrs;
},
/*
* 輸入框多選操作
*/
_manySelect: function(targetParent) {
var self = this,
_config = self.config,
_cache = self.cache;
if(_cache.inputArrs.length > 0) {
$(_config.targetCls,targetParent).val(_cache.inputArrs.join(','));
}
},
/*
* 判斷是否是string
*/
_isString: function(str) {
return Object.prototype.toString.apply(str) === '[object String]';
},
/*
* JS 動態(tài)添加css樣式
*/
_addStyleSheet: function(refWin, cssText, id){
var self = this;
if(self._isString(refWin)) {
id = cssText;
cssText = refWin;
refWin = window;
}
refWin = $(refWin);
var doc = document;
var elem;
if (id && (id = id.replace('#', ''))) {
elem = $('#' + id, doc);
}
// 僅添加一次，不重復添加
if (elem) {
return;
}
//elem = $('<style></style>'); 不能這樣創(chuàng)建 IE8有bug
elem = document.createElement("style");
// 先添加到 DOM 樹中，再給 cssText 賦值，否則 css hack 會失效
$('head', doc).append(elem);
if (elem.styleSheet) { // IE
elem.styleSheet.cssText = cssText;
} else { // W3C
elem.appendChild(doc.createTextNode(cssText));
}
},
/*
* 銷毀操作 釋放內(nèi)存
*/
destory: function() {
var self = this,
_config = self.config,
_cache = self.cache;
_cache.ret = [];
_cache.currentIndex = 0;
_cache.oldIndex = 0;
_cache.inputArrs = [];
_config.targetCls = null;
}
};
// 初始化
$(function(){
var auto = new AutoComplete({
// url: '/rocky/commonservice/user/find.json'
});
});
相關文章
這篇文章主要介紹了JS拖動鼠標畫出方框實現(xiàn)鼠標選區(qū)的方法,涉及javascript鼠標事件及頁面元素樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這里給大家分享的是本人近期學習與使用javascript之后總結出來的一些經(jīng)驗和心得，雖然目前只有5點，但以后會慢慢更新，希望對大家能有所幫助。2015-01-01
這篇文章主要給大家介紹了如何通過一篇文章看懂JavaScript中的回調(diào)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
本文主要對JavaScript閉包進行詳細介紹。相信對零基礎學習閉包的朋友們會有很好的幫助，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了js 圖片轉base64的方式(兩種),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
移動端點擊圖片放大特效PhotoSwipe.js插件實現(xiàn)
這篇文章主要為大家詳細介紹了移動端點擊圖片放大特效PhotoSwipe.js插件實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
有的時候要獲取當前日期,或者前一天、后一天的日期,下面這篇文章主要給大家介紹了關于js根據(jù)當前日期獲取前一周或者后一周等日期的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
今天在瀏覽網(wǎng)頁時無意中發(fā)現(xiàn)了這段JS劫持搜索引擎代碼。劫持搜索引擎正常搜索過來的流量，這是黑帽seo常用的劫持方法。特意解密出來供大家了解其劫持原理。感興趣的朋友一起學習學習吧2015-09-09
rollup是一款用來es6模塊打包代碼的構建工具(支持css和js打包)。這篇文章主要介紹了Rollup處理并打包JS文件項目實例,需要的朋友可以參考下2018-05-05
這篇文章主要給大家介紹了關于JavaScript圖片url地址轉base64的相關資料,圖片URL轉Base64是把圖片URL轉化為一個以base64編碼的字符串格式,使得圖片可以直接在HTML或CSS中使用,需要的朋友可以參考下2023-10-10