用JS对下拉菜单进行搜索提示

要在JavaScript和CSS中实现下拉菜单搜索功能,可以使用以下步骤 选项1选项2选项3选项4选项5 阅读详情

看如下的例子:
先加载两个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;/" >&nbsp;提示信息:<br>&nbsp;你输入了:"+ 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下拉菜单带搜索 前端实现自定义select下拉框,带搜索功能,无需引入第三方资源 立即下载

相关推荐

java+js实现下拉框提示搜索功能

在输入框中输入信息,会出现下拉框列出符合条件的数据,实现动态的查找功能

原生js实现下拉框,支持多选、搜索

通过js事件绑定实现支持搜索,多选的下拉框

shikaixina的博客 6921

下拉列表js实现搜索功能

简单实现对select的option进行查询选择,纯Javascript实现。

JS实现搜索功能页面(可搜索,无需数据库,无后端)

JS实现搜索功能页面,纯前端,无数据库,无后端,可搜索的搜索页面

xiaobuzq的博客 3892

js带搜索框的下拉列表

js带搜索框的下拉列表js带搜索框的下拉列表js带搜索框的下拉列表

js实现带搜索功能的下拉框

主要为大家详细介绍了js实现到搜索的下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前端jQuery和原生js 实现下拉框select模糊搜索功能总结

前端模糊查询,input框添加模糊搜索功能,原生select下拉列表添加搜索框实现模糊搜索,如:区划选择等场景

功能代码总结记录 4846

自抗扰(ADRC)控制原理及控制器设计

自抗扰控制原理以及控制器设计

weixin_43487974的博客 3万+

js实现下拉框搜索功能

js实现下拉框搜索功能下拉框搜索功能searchableSelect.js代码searchableSelect.css代码引入文件静态下拉框搜索html代码页面效果图 显示全部动态下拉框搜索示例 下拉框搜索功能 这里分享一个下拉框的搜索功能,感觉挺好用的。 searchableSelect.js代码 (function($){ // a case insensitive jQuery :contains selector $.expr[":"].searchableSelectContains =

weixin_48040732的博客 4535

nrf52840的uart0与uart1双串口使用

nrf52840的uart0与uart1双串口使用 项目原使用nrf52832,后面由于项目需要用到双串口,改用nrf52840,官方的例程没看到使用uart1的,找遍全网都没找到uart1的使用资料,有些不负责任的网文居然说40也只有一个uart,吓得俺赶紧又查看了一次datesheet,O得K、木鸭梨 SDK代码uart驱动中,搜索到uart1的驱动部分,说明官方驱动有uart1支持的 自己动手,丰衣足食吧,下面以nRF5_SDK_17.0.0_9d13099版本,在examples\ble_per

chhen168的博客 5625

C++中const和指针*的组合问题

今天在复习> 章节7.3的时候想到以前做的一个题,const和指针运算符*的若干种组合的合法性和意义问题,有点混淆,所以写了一个测试代码来验证一下,简单明了,一目了然。如果有什么遗漏的话欢迎指出。 首先是在Ubuntu14.04.1下用gcc 4.8.4编译运行的结果,编译器报错信息都附加在对应语句后面的注释里 /* * Note : Test for the combinations of

theColdOne的专栏 1081

Javascript实例 -- 计时器, 搜索框,selected联动

计时器: <body> <input type="text" id="i1"> <input type="button" value="开始" id="start" onclick="start()"> <input type="button" value="结束" id="end" onclick="end()"> <scr...

weixin_30399055的博客 133

工程师必看:如何用MINITAB快速计算传感器寿命(附详细步骤)

本文为工程师提供了使用MINITAB软件快速计算传感器寿命的详细实战指南。文章重点阐述了如何通过数据预处理、回归分析拟合阿伦尼斯模型,并最终预测平均寿命与置信区间,帮助工程师高效处理加速寿命试验数据,提升可靠性分析工作的准确性与效率。

weixin_29296241的博客 248

搜索提示

  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;m

iteye_6992的博客 153

[Cocos2d塔防游戏开发]Cocos2dx-3.X完成塔防游戏《王国保卫战》--地图(一)

上面3章图是完成后的效果图 游戏已完成,除了英雄外,基本还原了90%的游戏内容,一共13关,20种防御塔,30+种敌人,如上图,以假乱真吧 下面从地图模块起介绍我的方法,如有更好的方法,请留言一起讨论,游戏资源下载原版游戏数据包,解压即可 推荐一款软件,TextureUnpackerRelease1.04可以分割plist形式的图片,提高效率 经过一个月学习也发现之前有很多化简为繁的错误

7172

用 ABAP CDS 把树建起来:Hierarchy 的建模、调试与消费全流程

CDS Hierarchy 将树形数据结构作为一等公民引入 ABAP 开发,通过定义父子关联、根节点条件和兄弟排序规则,让数据库原生支持层级查询。相比传统递归处理方式,它能避免性能瓶颈,提供$node系统字段描述节点结构信息,并支持与SAP UI框架无缝集成。这种方法简化了组织架构、成本中心等业务场景的层级数据处理,使开发人员能够专注于业务逻辑而非底层实现。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 205

EasyUI 搜索框

draggable $(function (){ $('#s').searchbox({ /*width number:设置组件的宽度*/ width:200 /*searcher e:当搜索按钮被点击时执行*/ ,searcher:function(value,name){ alert(valu

phone13144830339的博客 546

【WRF-DART第一期】WRF/DART概述

【WRF-DART第一期】WRF/DART概述

WW、forever的博客 107

原生Js汉语拼音首字母匹配城市名/自动提示列表

根据城市的汉语名称首字母把城市排序,基本思路: 1.处理数据,按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQRSTU:{},VWXYZ:{}} 2.解析数据 创建数据div 给需要功能的input分别添加事件 效果预览:http://jsfiddle.net/dtdxrk/xdftL/embedded/...

weixin_34150224的博客 914

“华为杯”研究生数学建模竞赛2017年-【华为杯】B题:面向下一代光通信的 VCSEL 激光器仿真模型

得出以下主要结论:在相同的偏置电流条件下,随着温度的升高,带宽的峰值向。在相同的温度下,随着电流的增大,带宽的峰值越小且曲线由波峰形状。方案,包括可能的数学公式,不同温度和偏置电流下的带宽响应曲线,并与问题。线,得出以下主要结论:在相同的偏置电流条件下,随着温度的升高,带宽的峰。在相同的温度下,随着电流的增大,带宽的峰值越小且曲线由波峰形状逐渐变得。得的激光器特性曲线和模型中仿真得到的特性曲线,之后,可以将两组曲线的差。说明的是,由于数值优化算法的成功与否很大程度上依赖于初始参数的猜测,参。

getusushu的博客 97

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

javaScript-practice2019-0603

1.搜索框示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框示例</title> </head> <body> <!--onfocus ...

weixin_34318956的博客 81

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

input 搜索 实时搜索

input 搜索 实时搜索

荒的博客 1507

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

datalist 是什么?

提供预定义选项列表的容器。从外观上看,当用户在与之关联的输入框中进行输入操作时,会自动弹出一个下拉菜单,里面展示着一系列可供选择的预设值,就像一个智能助手,随时准备为用户提供输入建议。为省份输入框提供全国省份列表,用户无需记忆省份名称的准确拼写,避免了因输入错误导致的地址识别问题,几秒钟就能完成省份选择,快速进入后续城市、街道等信息的填写。中的匹配选项,比如用户输入 “苹”,下拉菜单就会优先展示 “苹果” 选项,方便用户快速选择,减少手动输入的工作量。提供的统一的下拉选择交互模式,与常见的下拉菜单(

Z09111616的博客 838

前端事件案例补充

【代码】前端事件案例补充。

qq_53842456的博客 205

(原生js)根据标题或者昵称进行模糊查询,后端判断逻辑,前端渲染显示toast提示。后端未给接口的情况)

原生js根据不同的搜索类型 前端自行进行搜索处理

Joy_nn的博客 415

基于js的动态下拉菜单

Google Suggest ;-) 基于js的动态下拉菜单 from Google Blog 基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中。能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录。试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤。 另...

weixin_30922589的博客 165
上一篇: 常用的JS函数
下一篇: 用js实现菜单的联动选择
Explorerwen
博客等级 码龄23年 4粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值