用JS对下拉菜单进行搜索提示
2005-02-23 13:27
295 查看
看如下的例子:
先加载两个js文件:
<script language="JavaScript" src="../../js/searchhelp.js"></script>
<script language="JavaScript" src="../../js/searchopen.js"></script>
在在复选框中进行调用:
<select name="i_pbedu" size="1" id="select9" style="width:80" onmouseover="selMouseOver(this)" onmouseout="selMouseOut(this)" onfocus="catch_focus(this)" onkeypress="catch_press(this)" onkeydown="catch_keydown(this)">
<%=FetchItem.fetchSelectItem("edu","3")%> </select>
searchhelp.js文件为:
//定义 select 原值
var oldValue=""
var oldText="";
var searchtype="1";
//select下拉框的onkeypress事件,定位下拉框的值
function catch_press(sel){
if(sel.selectedIndex>=0){
var s=String.fromCharCode(event.keyCode);
oldValue=oldValue+s;
oldText=oldText+s;
event.returnValue = false;
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}
/*if(searchtype=="0")
searchoptiontext(sel);
else
searchoptionvalue(sel);
selMouseOver();
*/
if(searchoptiontext(sel)){selMouseOver();return true;}
else {searchoptionvalue(sel);selMouseOver();}
}
//通过text描述定位
function searchoptionvalue(obj){
if(obj){
var invalue=oldValue;
var selectlength=obj.options.length
for(var i=0;i<selectlength;i++){
var temp=obj.options[i].value
if(temp==invalue){
obj.selectedIndex=i
obj.focus()
//break;
return true;
}
}
}
return false;
}
//通过值value定位
function searchoptiontext(obj){
if(obj){
var invalue=oldText;
var selectlength=obj.options.length
for(var i=0;i<selectlength;i++){
var temp=obj.options[i].text
//alert(temp.indexOf(invalue))
if(temp.indexOf(invalue)!=-1){
obj.selectedIndex=i
obj.focus()
//break;
return true;
}
}
}
return false;
}
//select下拉框的onfocus事件,清空保存的值
function catch_focus(sel) {
oldText ="";
oldValue ="";
}
//select下拉框的onkeydown事件,修改下拉框的值
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 13: //回车键
catch_focus(sel)
event.returnValue = false;
break;
case 27: //Esc键
catch_focus(sel)
event.returnValue = false;
break;
case 8: //空格健
var s = "";
if(searchtype=="1"){
s=oldText;
s = s.substr(0,s.length-1);
oldText=s;
}else{
s=oldValue;
s = s.substr(0,s.length-1);
oldValue=s;
}
selMouseOver(sel);
event.returnValue = false;
break;
}
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}
function selMouseOver(obj)
{
var innerText ="<font style=/"FONT-SIZE: 12px;color:red;line-height: 20px;/" > 提示信息:<br> 你输入了:"+ oldText+"<br><重新选择该列表将清空该值!></font>"
Composition.document.body.innerHTML = " "+innerText+" "
document.all.div_hint.style.display = "block";
document.all.div_hint.style.left = event.clientX + 20;
document.all.div_hint.style.top = event.clientY+20;
}
/*
function selMouseOver(obj)
{
with (document.all.div_hint)
{
innerText ="提示信息:/r/n 你输入了:"+ oldText+"/r/n <重新选择该列表将清空该值!>";
//obj.options[obj.selectedIndex].text;
if (innerText.length > 0)
{
innerText = " " + innerText + " ";
style.display = "block";
style.left = event.clientX + 25;
style.top = event.clientY+25;
}
}
}*/
//select 选择框鼠标移开时消失
function selMouseOut(obj)
{
with (document.all.div_hint)
{
style.display = "none"
}
}
searchopen.js文件为:
function opensearchwin(path)
{
window.open (path, '', 'height=500, width=600, top=20, left=100, toolbar=no, menubar=no, scrollbars=yes,resizable=yes,location=no, status=no')
}
先加载两个js文件:
<script language="JavaScript" src="../../js/searchhelp.js"></script>
<script language="JavaScript" src="../../js/searchopen.js"></script>
在在复选框中进行调用:
<select name="i_pbedu" size="1" id="select9" style="width:80" onmouseover="selMouseOver(this)" onmouseout="selMouseOut(this)" onfocus="catch_focus(this)" onkeypress="catch_press(this)" onkeydown="catch_keydown(this)">
<%=FetchItem.fetchSelectItem("edu","3")%> </select>
searchhelp.js文件为:
//定义 select 原值
var oldValue=""
var oldText="";
var searchtype="1";
//select下拉框的onkeypress事件,定位下拉框的值
function catch_press(sel){
if(sel.selectedIndex>=0){
var s=String.fromCharCode(event.keyCode);
oldValue=oldValue+s;
oldText=oldText+s;
event.returnValue = false;
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}
/*if(searchtype=="0")
searchoptiontext(sel);
else
searchoptionvalue(sel);
selMouseOver();
*/
if(searchoptiontext(sel)){selMouseOver();return true;}
else {searchoptionvalue(sel);selMouseOver();}
}
//通过text描述定位
function searchoptionvalue(obj){
if(obj){
var invalue=oldValue;
var selectlength=obj.options.length
for(var i=0;i<selectlength;i++){
var temp=obj.options[i].value
if(temp==invalue){
obj.selectedIndex=i
obj.focus()
//break;
return true;
}
}
}
return false;
}
//通过值value定位
function searchoptiontext(obj){
if(obj){
var invalue=oldText;
var selectlength=obj.options.length
for(var i=0;i<selectlength;i++){
var temp=obj.options[i].text
//alert(temp.indexOf(invalue))
if(temp.indexOf(invalue)!=-1){
obj.selectedIndex=i
obj.focus()
//break;
return true;
}
}
}
return false;
}
//select下拉框的onfocus事件,清空保存的值
function catch_focus(sel) {
oldText ="";
oldValue ="";
}
//select下拉框的onkeydown事件,修改下拉框的值
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 13: //回车键
catch_focus(sel)
event.returnValue = false;
break;
case 27: //Esc键
catch_focus(sel)
event.returnValue = false;
break;
case 8: //空格健
var s = "";
if(searchtype=="1"){
s=oldText;
s = s.substr(0,s.length-1);
oldText=s;
}else{
s=oldValue;
s = s.substr(0,s.length-1);
oldValue=s;
}
selMouseOver(sel);
event.returnValue = false;
break;
}
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}
function selMouseOver(obj)
{
var innerText ="<font style=/"FONT-SIZE: 12px;color:red;line-height: 20px;/" > 提示信息:<br> 你输入了:"+ oldText+"<br><重新选择该列表将清空该值!></font>"
Composition.document.body.innerHTML = " "+innerText+" "
document.all.div_hint.style.display = "block";
document.all.div_hint.style.left = event.clientX + 20;
document.all.div_hint.style.top = event.clientY+20;
}
/*
function selMouseOver(obj)
{
with (document.all.div_hint)
{
innerText ="提示信息:/r/n 你输入了:"+ oldText+"/r/n <重新选择该列表将清空该值!>";
//obj.options[obj.selectedIndex].text;
if (innerText.length > 0)
{
innerText = " " + innerText + " ";
style.display = "block";
style.left = event.clientX + 25;
style.top = event.clientY+25;
}
}
}*/
//select 选择框鼠标移开时消失
function selMouseOut(obj)
{
with (document.all.div_hint)
{
style.display = "none"
}
}
searchopen.js文件为:
function opensearchwin(path)
{
window.open (path, '', 'height=500, width=600, top=20, left=100, toolbar=no, menubar=no, scrollbars=yes,resizable=yes,location=no, status=no')
}
相关文章推荐
- ftl我想对搜索不到数据进行提示搜索不到数据为何没作用
- 推荐js实现商品分类到搜索栏友好提示(人机交互)第1/3页
- js判断来路是否是百度等搜索索引进行弹窗或自动跳转
- JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
- google搜索自动提示下拉菜单
- eclipse中 对工程中部分js文件中的错误不进行提示,不在文件名或工程上有错误提示
- 在Google.com里面进行搜索的时候,经常会遇到突然出现“该页无法显示”的提示
- JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
- js实用表单模糊搜索和自动提示插件
- .NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路
- VS如何在独立的JS文件下进行其它的独立JS文件函数进行感知提示
- PHP+JS实现搜索自动提示。
- js搜索下拉菜单
- JS仿百度搜索自动提示框匹配查询功能
- 输入自动提示搜索提示功能(javascript:sugggestion.js)
- js实用表单模糊搜索和自动提示插件
- .NET+JS对用户输入内容进行字数提示功能的实例代码
- Js和Json技术实现百度搜索提示功能
- 有关在 Windows 中进行搜索的高级提示
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】