怎么用纯JS实现仿百度搜索智能提示？纯JS实现仿百度搜索智能提示

项目中经常用到搜索智能提示，开源的象jQuery、yui等都有，但是觉得有点臃肿，于是自己用ajaxpro+JavaScript搞了一个

目前只支持ie，可能还有若干个bug。相信新手应该用得着吧，老鸟就算了。

大家发现了请指出，我马上改正，大家多多支持哈~~

核心代码如下：

代码
var arrList = new Array();//要搜索的数据
var objouter, objInput, objInputId = "txtSearch";//控件ID
var selectedIndex = -1, intTmp;
//初始化
function smanPromptList() {
this.style = "overflow:hidden;width:393px;height:auto;background:#FFFFFF;border:1px solid #000000;font-size:14px;cursor:default;"
if (arrList.constructor != Array) {
alert('smanPromptList初始化失败:第一个参数非数组!');
return;
}
document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onblur></div>");
document.write("<style type=\"text/css\">.sman_selectedStyle{background-Color:#3366CC;color:#FFFFFF}</style>");

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;
});
objouter = document.getElementById("__smanDisp") //显示的DIV对象
objInput = document.getElementById(objInputId); //文本框对象
if (objInput == null) {
alert('smanPromptList初始化失败:没有找到"' + objInputId + '"文本框');
return;
}
objInput.onblur = function() { objouter.style.display = 'none'; }
objInput.onkeyup = checkKeyCode;
objInput.onfocus = checkAndShow;
}

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;
}
function outSelection(Index) {
objInput.value = objouter.children[Index].innerText.Trim();
objouter.style.display = 'none';
}
function divPosition() {
objouter.style.top = getAbsoluteHeight(objInput) + getAbsoluteTop(objInput);
objouter.style.left = getAbsoluteLeft(objInput);
objouter.style.width = getAbsoluteWidth(objInput);
}
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; }
if (selectedIndex == maxIndex) { selectedIndex = -1; }

for (intTmp = 0; intTmp <= maxIndex; intTmp++) {
if (intTmp == selectedIndex) {
objouter.children[intTmp].className = "sman_selectedStyle";
objInput.value = objouter.children[selectedIndex].innerText.Trim();
}
else {
objouter.children[intTmp].className = "";
}
}
}
function checkKeyCode() {
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 strInput = objInput.value.Trim();
if (strInput != "") {
divPosition();
selectedIndex = -1;
arrList.length = 0;
objouter.innerHTML = "";
//=======================这里修改数据================================
var result = WebApplicationTestDiv.WebForm11.GetArray(strInput).value;
//===================================================================
var data = eval('(' + result + ')');
for (var j = 0; j < data.length; j++) {

arrList[j] = data[j];
}

for (intTmp = 0; intTmp < arrList.length; intTmp++) {
for (i = 0; i < arrList[intTmp].length; i++) {
if (arrList[intTmp].substr(i, strInput.length).toUpperCase() == strInput.toUpperCase()) {
addOption(arrList[intTmp], strInput);
}
if (objouter.childNodes.length >= 10) {
break;
}
}
}
if (objouter.childNodes.length > 0) {
objouter.innerHTML += "<div style=\"width:395px;height:22px;text-align:right;color:Blue;text-decoration:underline;cursor:pointer;\">关闭</div>";
}
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 style=\"width:395px;height:22px\" onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('" + objInputId + "').value='" + value + "'\">" + v + "</div>"
}
String.prototype.Trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
smanPromptList();
 

后台核心代码：

代码
[AjaxPro.AjaxMethod]
public string GetArray(string name)
{
try
{
List<string> list = new List<string>();
#region
list.Add("1");
list.Add("12");
list.Add("123");
list.Add("1234");
list.Add("12345");
list.Add("123456");
list.Add("1234567");
list.Add("12345678");
list.Add("123456789");
list.Add("9876543210");
list.Add("987654321");
list.Add("98765432");
list.Add("9876543");
list.Add("987654");
list.Add("98765");
list.Add("9876");
list.Add("987");
list.Add("98");
list.Add("9");
list.Add("1111222");
list.Add("1sdfsdf.comdos32.cn");
list.Add("111222.comdos32.cn");
list.Add("a11sdafs.netdos32.cn");
list.Add("b22dsafsdfdos32.cn");
list.Add("c333asdfsadfdos32.cn");
list.Add("4444dsafasdfdos32.cn");
list.Add("dddsfddsafdsafdos32.cn");
list.Add("121213dsafsdafdos32.cn");
list.Add("43213asdfadsfdos32.cn");
list.Add("dsa3121dasf3dos32.cn");
list.Add("a213dos32.cn");
list.Add("323313dos32.cn");
list.Add("3213dos32.cn");
list.Add("32213dos32.cn");
list.Add("dsfsdddddos32.cn");
list.Add("ds911dfsfddos32.cn");
list.Add("ffdafddos32.cn");
list.Add("杨澜");
list.Add("杨扬");
list.Add("杨白劳");
list.Add("杨钰莹");
list.Add("杨百万");
list.Add("杨一洋");
list.Add("杨丞琳");
list.Add("杨一尔");
list.Add("杨二尔");
#endregion
List<string> l1 = list.FindAll(delegate(string ss) { return ss.Contains(name); });
string str = "[";
foreach (string s in l1)
{
str += "\"" + s + "\"" + ",";
}
str = str.TrimEnd(',') + "]";
return str;
}
catch (Exception ex)
{
throw ex;
}
}
 

最后效果如图：