类似百度、google的模糊查询下拉列表显示制作
前几天练习js，做了个类似百度和google的简单模糊查询下拉列表显示效果。
任务：
制作一个模糊查询的下拉列表显示的效果，可以对项目名称进行模糊查询。
我的基本思路：首先在加载页面时初始化，将数据库中的所有项目名称通过ajax传输到客户端存放到一个全局的数组里，然后在标签<input type="text">中的onkeydown事件触发的函数中对input中输入的文字在全局数组中进行搜索，将搜索到的项目名称保存到另一个数组中，再将其动态绘制到列表li中进行显示。
下面看代码：
首先是输入框的制作，既可以有下拉列表select的功能又有输入功能。
<span style="position: relative; float: left;">
<input type="text" id ="projectNameText" onkeydown="searchProjectName()" onblur="isProjectNameTextNull(),searchProjectName()" style="width:280px;position:absolute"/>
<select id="projectNameSelect" onchange="onChange(this)" style="width:300px;CLIP: rect(auto auto auto 280px); POSITION:absolute"></select>
</span>
<ol id="projectNameOl" style="background-color:white; border: 1px solid #000000; float:left;margin-top: 21px;margin-left: 69px;width: 258px; position:absolute;"> </ol>效果图：
这个既可以输入又可以通过下拉列表选择，主要是利用<input>和<select>合成的，使用
rect(auto auto auto 280px); POSITION:absolute将其合成，意思是<select>距离左边280px的位置将被覆盖。
/* 功能： 项目输入框中输入项目名后触发此函数，实现项目名模糊查找功能
* 参数： 无
* 返回值： 无
* 创建人： Lixam
* 创建时间：2013-9-8
* 修改人：
* 修改时间：
*/
function searchProjectName() {
var projectNameValue = document.getElementById("projectNameText").value;
//var myregExep = new RegExp("'" + projectNameValue + "'", "g");
//存放查询到的项目名称
var name = new Array();
var j = 0;
for (var i = 0; i < projectNameGlobal.length; i++) {
if(projectNameGlobal[i].search(projectNameValue) != -1) {
name[j] = projectNameGlobal[i];
j++;
}
}
//绘制名称列表
drawProjectNameList(name);
}
/* 功能： 绘制项目名称列表
* 参数： 存放查询到的项目名数组
* 返回值： 无
* 创建人： Lixam
* 创建时间：2013-9-8
* 修改人：
* 修改时间：
*/
function drawProjectNameList(projectNameSet) {
var strLi = "";
//绘制项目名称列表
for (var i = 0; i < projectNameSet.length;i++ ) {
strLi += "<li id='li'" + i + "'' onmouseover='setBackcolorOnmouse(this)' onclick='showSelectProjectName(this)' style='background-color:white'>" + projectNameSet[i] + "</li>";
}
document.getElementById("projectNameOl").innerHTML = "";
if(strLi != "")
document.getElementById("projectNameOl").innerHTML = strLi;
//设置每个li的text值
var liSet = document.getElementById("projectNameOl").getElementsByTagName("li");
for (var i = 0; i < liSet.length; i++) {
liSet.item(i).text = projectNameSet[i];
}
}
/* 功能： 当鼠标移动到li标签上时改变颜色
* 参数： object 传递this
* 返回值： 无
* 创建人： Lixam
* 创建时间：2013-9-8
* 修改人：
* 修改时间：
*/
function setBackcolorOnmouse(object) {
//变色前先将之前的一项颜色和下滑线去掉
var liSet = document.getElementById("projectNameOl").getElementsByTagName("li");
for (var i = 0; i < liSet.length; i++) {
liSet.item(i).style.backgroundColor = "white";
liSet.item(i).style.textDecoration = "";
}
//设置颜色和下滑线
object.style.backgroundColor = "silver";
object.style.textDecoration = "underline";
}
/* 功能： 当鼠标点击项目名称模糊查询的列表时将项目名显示到文本框中
* 参数： object 传递this值
* 返回值： 无
* 创建人： Lixam
* 创建时间：2013-9-9
* 修改人：
* 修改时间：
*/
function showSelectProjectName(object) {
document.getElementById('projectNameText').value = object.text;
}
效果图：
