您的位置：首页 > Web前端 > JavaScript

用javascript实现输入框的输入推荐代码

2010-07-17 23:58 441 查看

自己学习javascript之余，实现了输入框的智能提示功能，其代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<body>
<div id="content">
<p>Type in a color in lowercase:<br /></p>
<input type ="text" value ="" id ="textColor" onkeyup ="TextUtil.autoSuggest(this,arrColors,'lstColors');" /><br />
<p>nidddddddddddddddddddddddddddddd</p>
<select id="lstColors" size ="5" style ="width:200px; visibility:hidden; position :absolute ;" onclick ="setText(this,'textColor');">

</select>
</div>
<script type ="text/javascript" >
var arrColors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown", "black", "tan", "ivory", "navy", "aqua", "purple", "pink", "gray", "silver"];
arrColors.sort();
function setText(oListBox, otextColorId) {
var textColor = document.getElementById(otextColorId);
if (oListBox.selectedIndex > -1) {
textColor.value = oListBox.options[oListBox.selectedIndex].text;
}
oListBox.style.visibility = "hidden";
}
var TextUtil = new Object;
TextUtil.autoSuggestMatch = function(sText, arrayValues) {
var arrayResult = new Array;
if (sText != "") {
for (var i = 0; i < arrayValues.length; i++) {
if (arrayValues[i].indexOf(sText) == 0) {
arrayResult.push(arrayValues[i]);
}
}
}
return arrayResult;
}
TextUtil.autoSuggest = function(oTextBox, arrValues, sListboxId) {
var listbox = document.getElementById(sListboxId);
listbox.style.visibility = "visible";
listbox.style.top = "70px";
for (var i = listbox.options.length - 1; i >= 0; i--) {
listbox.remove(i);
}

var arrayMatch = TextUtil.autoSuggestMatch(oTextBox.value, arrValues);
for (var i = 0; i < arrayMatch.length; i++) {
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(arrayMatch[i]));
if (arguments.length == 3) {
oOption.setAttribute("value", i);
}
listbox.appendChild(oOption);
}
}
function setIn(listColorId) {
var listBox = document.getElementById(listColorId);
listBox.style.visibility = "hidden";
}
</script>
</body>
</html>

不过里面有几个问题，一是该实现主要是通过客户端javascript实现，当库比较大时，其效率和可行性将是瓶颈，自己提出设想如下：

1、通过异步通讯实现服务器端的文本存储和更新

2、检索方式可使通过B+树来实现，以便替代目前为止效率地下的检索

由于时间原因，目前先实现到这里。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航