1、首先，用div标签在网页中，插入一个可以输入文本的搜索框。
2、在标签中设置搜索框的标识，标识名为lookuptxt。
3、设置搜索框以左侧为基准浮动，衬距为20像素。
4、用input插入输入文本框，类型为文本，标识为choosetxt。
5、输入文本框离左侧的衬距为10像素，高度为22像素，宽度为180像素，离顶部的衬距为16像素。
6、边框的宽度设置为2像素，颜色为蓝色，输入框的背景色设置为00ffff。
7、接着，用div标签插入搜索按钮，标识符为lookupbtn。
8、搜索按钮以左侧为基准浮动，宽度为60像素，高度为22像素。
9、按钮的颜色设置为蓝色，字体为20像素，离顶部和左侧的衬距都设置为22像素。
10、单击搜索按钮后，运行搜索命令，用函数Btnselect实现搜索功能
11、最后，不要忘了插入搜索按钮的文本。
12、在网页中浏览程序，在顶部显示输入文本框和搜索按钮，实现搜索栏的功能。
1. 当select输入框中每输入一点内容的时候，在option中找出与内容匹配的选项显示在option的前面选项中。2. 如何获取每次输入的内容，当keyup的时候触发函数。
问题：select标签中可以输入内容吗？(解决：另一篇文章可选择和输入的下拉列表框 )
3. 如何获得输入框中的内容？(解决，在输入框上添加onkeyup时间触发的函数用js获得)
4. 如何匹配？（解决）
4.1 如何获得所有option中的内容？(解决)
复制代码代码如下:
function getSelectText()
{
//获得所有select标签
var object = document.getElementsByTagName('select')
//因为该html中只有一个select标签，所以就是name = "aabb"代表的标签
var obj = object[0]
//alert(obj.length)
//alert(obj[0])
//保存所有option 的值
var allText
for(i=0i<obj.lengthi++)
{
allText += obj[i].innerText+','//关键是通过option对象的innerText属性获取到选项文本
}
return allText
}
4.2 js分割字符串？（解决）
复制代码代码如下:
var allText = getSelectText()
//alert(allText)
// 每个option的内容分割开来
var eachOptin = new Array()
eachOptin=allText.split(",")//字符分割
4.3 如何在js中匹配？
复制代码代码如下:
//如果option内容中有输入的内容就返回第一次匹配的位置（大于等于0），如果没有匹配的就返回-1
var flag = eachOptin[i].indexOf(shuru)
5. 如何让匹配的内容显示在option的前面的选项？（通过改变option的index编号）（ 解决）
方法：当查到匹配的选项的时候，将第一个option重新新增到select最后，然后，将第一个的值重置为匹配的option的值，然后删掉原始匹配的option
7. js 实现select标签右边三角的功能（未解决，当搜索之后，直接显示所有option选项可供选择）
8.在匹配的option选项有多个的时候出现bedug,注意测试，和重新修改一下，应该是上面第五条中的逻辑问题
代码如下：
复制代码代码如下:
<!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>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>测试</title>
<script>
function onku()
{
//获得input输入框的内容
var shuru = document.getElementById('ccdd').value
var object = document.getElementsByTagName('select')
var obj = object[0]
//如果输入的内容为空，所有的选项都匹配
if(shuru!= '')
{
//alert(shuru)
//获得option中的所有内容
var allText = getSelectText()
//alert(allText)
// 每个option的内容分割开来
var eachOptin = new Array()
eachOptin=allText.split(",")//字符分割
var f = 1
for (i=1i<eachOptin.length-1 i++ )
{
//alert(eachOptin[i])
//如果option内容中有输入的内容就返回第一次匹配的位置（大于等于0），如果没有匹配的就返回-1
var flag = eachOptin[i].indexOf(shuru)
if(flag >=0)
{
//alert(i)
//将index为f的option重新新增一遍，显示在最后
obj.options.add(new Option(obj[i].innerText,obj[f].value))
//将编号为f的option重新赋值，赋值为符合条件的第一个option
obj.options[f]=new Option(eachOptin[i],eachOptin[i])
//删除最初存在的符合条件的option
obj.remove(i)
f++
}
}
}
}
function getSelectText()
{
//获得所有select标签
var object = document.getElementsByTagName('select')
//因为该html中只有一个select标签，所以就是name = "aabb"代表的标签
var obj = object[0]
//alert(obj.length)
//alert(obj[0])
//保存所有option 的值
var allText
for(i=0i<obj.lengthi++)
{
//alert(obj[i].index)//获得option的index编号
//alert(obj[i].value)//获得option的value的值
allText+= obj[i].innerText+','//关键是通过option对象的innerText属性获取到选项文本
}
return allText
}
</script>
</head>
<body>
<span style=" position:absoluteborder:1pt solid #c1c1c1overflow:hiddenwidth:188pxheight:19pxclip:rect(-1px 190px 190px 170px)">
<select name="aabb" id="aabb" style="width:190pxheight:20pxmargin:-2px"
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value">
<option value="" style="color:#c2c2c2">--请选择--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="上123">上123</option>
<option value="苏州">苏州</option>
</select>
</span>
<span style="position:absoluteborder:1pt solid #c1c1c1border-left:1pt solid #c1c1c1border-bottom:1pt solid #c1c1c1width:170pxheight:19px">
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:170pxheight:15pxborder:0pt" onkeyup="onku()">
</span>
</body>
</html>
js模糊查询 定位select 下拉框//功能：快速定位select中内容的方法
//描述：当txt中的内容变化时，下拉框的内容跟着定位。比如当在input中录入a时，select中定位到第一个有a开头的元素。
// 该方法是为选择炉号、选择钢号、选择生产号三个select元素用的。
//参数：selectName是select元素的名字，inputText是input中已经录入了的内容。
function txtOnChange(selectName,inputText){
if (selectName.selectedIndex!=-1){
selectName.options(selectName.selectedIndex).selected = false
}
/*当selectName长度不固定时，短selectName的定位*/
for (i=0i<selectName.options.lengthi++){
if (selectName.options(i).text == inputText){
selectName.options(i).selected = true
return
}
}
for (i=0i<selectName.options.lengthi++){
if (selectName.options(i).text.indexOf(inputText)!=-1){
selectName.options(i).selected = true
return
}
}
}
//功能：当text得到焦点时，清空内容
//描述：同上
//参数：oText，触发该函数的text元素。
function txtOnfocus(oText){
oText.value=""
}
文本框使用 onkeyup事件
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）