<html>
<head>
<script language=”javascript”>
var intIndex=0;
arrList = new Array();
arrList[intIndex++] = “1sdfsdf.com”;
arrList[intIndex++] = “a11sdafs.net”;
arrList[intIndex++] = “b22dsafsdf”;
arrList[intIndex++] = “c333asdfsadf”;
arrList[intIndex++] = “4444dsafasdf”;
arrList[intIndex++] = “我sfddsafdsaf”;
arrList[intIndex++] = “121213dsafsdaf”;
arrList[intIndex++] = “大43213asdfadsf”;
arrList[intIndex++] = “大dsa3121dasf3”;
arrList[intIndex++] = “大a213”;
arrList[intIndex++] = “323313”;
arrList[intIndex++] = “3213”;
arrList[intIndex++] = “32213”;
arrList[intIndex++] = “dsfsdddd”;
arrList[intIndex++] = “ds11dfsfd”;
arrList[intIndex++] = “ffdafd”;
arrList[intIndex++] = “afdfd”;
arrList[intIndex++] = “afd”;
arrList[intIndex++] = “baffad”;
arrList[intIndex++] = “2fda2fd”;
arrList[intIndex++] = “dasd”;
arrList[intIndex++] = “北京 BEIJING”;
arrList[intIndex++] = “上海 SHANGHAI”;
arrList[intIndex++] = “广州 GUANGZHOU”;
arrList[intIndex++] = “深圳 SHENZHEN”;
arrList[intIndex++] = “成都 CHENGDU”;
function smanPromptList(arrList,objInputId){
this.style = “background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;”
if (arrList.constructor!=Array){alert(‘smanPromptList初始化失败:第一个参数非数组!’);return ;}
window.onload =function() {
arrList.sort(function(a,b){
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
})
var objouter=document.getElementById(“__smanDisp”) //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=0;
var intTmp; //循环用的:)
if (objInput==null) {alert(‘smanPromptList初始化失败:没有找到”‘+objInputId+'”文本框’);return ;}
//文本框失去焦点
objInput.οnblur=function(){
objouter.style.display=’none’;
}
//文本框录入内容
objInput.onpropertychange=checkAndShow;
//文本框得到焦点
objInput.οnfοcus=checkAndShow;
//文本框按键抬起
objInput.οnkeydοwn=checkKeyCode;
function checkKeyCode(){
if(objInput.value==””){
objouter.style.display=’none’;
return;
}
var ie = (document.all)? true:false;
if (ie){
var keyCode=event.keyCode;
if (keyCode==40||keyCode==38){ //下上
var isUp=keyCode==40;
chageSelection(isUp);
}else if (keyCode==13){//回车
outSelection(selectedIndex);
}
divPosition();
}
}
function checkAndShow(){
var strInput = objInput.value;
if (strInput!=””){
divPosition();
selectedIndex=0;
objouter.innerHTML =””;
//模糊查询的结果的行数,控制objouter显示
var result=0;
for (intTmp=0;intTmp<arrList.length;intTmp++){
var count=0;
for(var k =0;k<arrList[intTmp].length;k++){
if (arrList[intTmp].substr(k, strInput.length).toUpperCase()==strInput.toUpperCase()){
if(count==1)
{
break;
}
addOption(arrList[intTmp]);
count++;
result++;
}
}
}
if(result==0){
objouter.style.display=’none’;
}else{
objouter.style.display=”;
}
}else{
objouter.style.display=’none’;
}
function addOption(value){
objouter.innerHTML +=”<div οnmοuseοver=/”this.className=’sman_selectedStyle’/” οnmοuseοut=/”this.className=”/” οnmοusedοwn=/”document.getElementById(‘”+objInputId+”‘).value='” + value.split(” “)[0] + “‘/”>” + value + “</div>”
}
return result;
}
function chageSelection(isUp){
if (objouter.style.display==’none’){
objouter.style.display=”;
}else{
if (isUp)
selectedIndex++
else
selectedIndex–
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){
if (intTmp==selectedIndex){
objouter.children[intTmp].className=”sman_selectedStyle”;
}else{
objouter.children[intTmp].className=””;
}
}
}
function outSelection(Index){
var value=””;
try{
value = objouter.children[Index].innerText;
objInput.value = value.split(” “)[0];
objouter.style.display=’none’;
}catch(err){
}
}
function divPosition(){
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
objouter.style.left =getAbsoluteLeft(objInput);
objouter.style.width=getAbsoluteWidth(objInput)
}
}
document.write(“<div id=’__smanDisp’ style=’position:absolute;display:none;” + this.style + “‘ onbulr> </div>”);
document.write(“<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>”);
function getAbsoluteHeight(ob){
return ob.offsetHeight
}
function getAbsoluteWidth(ob){
return ob.offsetWidth
}
function getAbsoluteLeft(ob){
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != “BODY” ){
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft ;
}
function getAbsoluteTop(ob){
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != “BODY” ){
mendingTop += ob .offsetParent.offsetTop;
ob = ob .offsetParent;
}
return mendingTop ;
}
}
smanPromptList(arrList,”inputer”)
</script>
</head>
<body>
<div>
<input type=”text” id=”inputer”>
</div>
</body>
</html>
今天的文章使用js实现文本框模糊查询自动提示动能分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29379.html
