仿google自动完成的JAVASCRIPT

原创 2007年10月04日 16:44:00
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">

function suckerfish(type, tag, parentId)
{
        if (window.attachEvent)
        {
                window.attachEvent("onload", function()
                {
                        var sfEls = (parentId==null)?

document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
                        type(sfEls);
                });
        }
}
sfFocus = function(sfEls)
{
        for (var i=0; i<sfEls.length; i++)
        {
                sfEls[i].onfocus=function()
                {
                        this.className+=" sffocus";
                        if( this.value == this.defaultValue ) { this.value = ""; }
                }
                sfEls[i].onblur=function()
                {
                        this.className=this.className.replace(new RegExp(" sffocus//b"), "");
                        if( this.value == "" ) { this.value = this.defaultValue; }
                                        }
        }
}
suckerfish(sfFocus, "INPUT");
suckerfish(sfFocus, "TEXTAREA"); 
suckerfish(sfFocus, "Select"); 


function smanPromptList(strList,objInputId){
arrList = new Array();
this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;"
window.onload =function() {
        var tmpStr1 = strList.split(",");
        for(i=0;i<tmpStr1.length;i++){
            arrList[i] = eval(tmpStr1[i])
            arrList[i].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 selectedIndex=-1;
var intTmp; //循环用的:)
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var objInput2 = document.getElementById("inputer2"); //文本框对象
var tmpStr = objInputId.split(",");
for(i=0;i<tmpStr.length;i++){
    var objInput = document.getElementById(tmpStr[i]); //文本框对象
//if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
window.onfocus=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
}
function checkKeyCode(obj){
var ie = (document.all)? true:false
if (ie){
var keyCode=event.keyCode
if (keyCode==40||keyCode==38){ //下上
  var isUp=false
  if(keyCode==40) isUp=true ;
  chageSelection(isUp)
}else if (keyCode==13){//回车
  outSelection(selectedIndex);
}else{
  checkAndShow()
}
}else{
checkAndShow()
}
divPosition()
}

function checkAndShow(){
    var objInput=null;
    var objList;
    for(i=0;i<document.all.tags('INPUT').length;i++) 
    {
        if(document.activeElement.islist=="true"){
            var objInput=document.activeElement;
            var objInputId = objInput.id;
            objList = arrList[objInput.list];
            //alert(objList.length)
        }
    }
    if(objInput!=null){
  var strInput = objInput.value
  if (strInput!=""){
  divPosition();
  selectedIndex=-1;
  objouter.innerHTML ="";
  for (intTmp=0;intTmp<objList.length;intTmp++){
  for(i=0;i<objList[intTmp].length;i++){ 
if (objList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase()){
    addOption(objList[intTmp],strInput);
  }
}
  }
  objouter.style.display='';
  }else{
  objouter.style.display='none';
  }
}
function addOption(value,keyw){
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>");
  objouter.innerHTML +="<div onmouseover=/"this.className='sman_selectedStyle'/" onmouseout=/"this.className=''/" onmousedown=/"document.getElementById('"+objInputId+"').value='" + value + "';window.focus();/">" + v + "</div>" 
}
}
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){
if(!objouter.children[Index])return;
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(){
    var objInput=null;
    for(i=0;i<document.all.tags('INPUT').length;i++) 
    {
        if(document.activeElement.islist=="true"){
            var objInput=document.activeElement;
        }
    }
    if(objInput!=null){
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 s_el=0;el=ob;while(el){s_el=s_el+el.offsetLeft;el=el.offsetParent;}; return s_el
}


function getAbsoluteTop(ob){
var s_el=0;el=ob;while(el){s_el=s_el+el.offsetTop ;el=el.offsetParent;}; return s_el
}
}

var intIndex=0;arrList1 = new Array();
arrList1[intIndex++] = " www.sina.com.com";
arrList1[intIndex++] = "业务员";
arrList1[intIndex++] = "业务精英";
arrList1[intIndex++] = "业务主管";
arrList1[intIndex++] = "4444dsafasdf";
arrList1[intIndex++] = "dddsfddsafdsaf";
arrList1[intIndex++] = "121213dsafsdaf";
arrList1[intIndex++] = "43213asdfadsf";
arrList1[intIndex++] = "dsa3121dasf3";

var intIndex=0;arrList2 = new Array();
arrList2[intIndex++] = " www.sina.com.com";
arrList2[intIndex++] = "百度";
arrList2[intIndex++] = "中华人民共和国";
arrList2[intIndex++] = "你好";
arrList2[intIndex++] = "4444dsafasdf";
arrList2[intIndex++] = "dddsfddsafdsaf";
arrList2[intIndex++] = "wqewe32waada";
arrList2[intIndex++] = "43213asdfadsf";
arrList2[intIndex++] = "a32fafsaaa";
arrList2[intIndex++] = "dsa3121dasf3";

smanPromptList("arrList1,arrList2","inputer,inputer1")

</script>

<style>
.inp{ border:1px solid #999; padding:0px 0 0 2px;height:23px; line-height:23px; font-size:14px; color:#666}
.inp.sffocus {        background:#fff; border:1px solid #f90; color:blue ; }
</style>
<input name="textinput"  tabindex="1"  type="text" size="45" class="inp" islist=true list="0" value="业务员"  id="inputer" /><br>
<br>
<br>

<input name="textinput"  tabindex="1"  type="text" size="45" class="inp" islist=true list="1" value="业务员"  id="inputer1" />
</html>
 

仿谷歌自动补全js

大四那年在东软实习时,编写的一个仿谷歌自动补全的js。而且已改造通用模板,根据onfocus="init('hotKeyword1','1','/google/googlesearch.mvc')"几...
  • ardo_pass
  • ardo_pass
  • 2017年01月10日 15:34
  • 171

自动完成文本框(AutoCompleteTextView)提示文本框

自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上也是一个文本编辑框,比文本编辑框多了一个功能:当用户输入一个(指定个数)字符之后,自动完成文本框会显示一个下...
  • mengshirui_
  • mengshirui_
  • 2016年07月20日 17:28
  • 731

Jquery 仿百度搜索引擎自动完成功能

源代码如下所示: 自动完成例子   #search label {    display: block;   }   #search-text {    width: 150px;   } ...
  • javaquentin
  • javaquentin
  • 2014年12月22日 15:43
  • 2316

Google JavaScript 编码规范指南

JavaScript 语言规范 变量 link ▽ 声明变量必须加上 var 关键字. Decision: 当你没有写 var, 变量就会暴露在全局上下文中, 这样很可能会和现...
  • xianghongai
  • xianghongai
  • 2015年05月18日 20:04
  • 2723

高仿GooglePlay(一)

一,概述这是高仿goole市场的一个项目。配有服务端。这里我们只关注客户端。由于CSDN对图片大小有限制,有的功能没演示出来。后续会一点点的贴出。基本效果如下: 二,分析和市场上很多项目整体模式一样...
  • AI_96
  • AI_96
  • 2016年03月20日 14:55
  • 620

Google JavaScript代码风格指南

Google JavaScript代码风格指南 修正版本 2.28 原文:http://google-styleguide.googlecode.com/svn/trunk/javascriptgu...
  • mergerly
  • mergerly
  • 2015年07月06日 10:52
  • 2115

用Html+Js实现的“自动补全”功能

正文:       这几天,帮同学解决一个问题,虽然他的问题还没有完全解决,但在解决问题的过程中我做了这个“自动补全”的功能。虽然这个补全的功能在网上也有很多代码,但是在我写代码和学习的过程中,...
  • qq_27376871
  • qq_27376871
  • 2016年06月26日 13:20
  • 3944

Android开发系列(二十):AutoCompleteTextView(自动完成文本框)的功能和用法

当用户输入一定的字符之后,自动完成文本框能够显示一个下拉菜单,供用户从中选择,当用户选择某个菜单项之后,AutoCompleteTextView可以按照用户的选择自动填写该文本框 AutoCompl...
  • u010800530
  • u010800530
  • 2014年10月26日 17:11
  • 1846

ThinkPHP 自动完成 和 自动验证

自动完成: namespace Home\Model;use Think\Model;class UserModel extends Model{ protected $_auto = ar...
  • u014715974
  • u014715974
  • 2016年03月21日 21:47
  • 381

asp.net mvc利用 ajax实现输入自动完成

新建一个asp.net mvc3项目AutoComplete. 在shared/_layout.cshtml母版页中导入实现自动完成必须的js库 @ViewBag.Titl...
  • lr982330245
  • lr982330245
  • 2013年09月21日 21:05
  • 1814
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿google自动完成的JAVASCRIPT
举报原因:
原因补充:

(最多只允许输入30个字)