Jquery实现下拉框搜索功能

最新推荐文章于 2024-09-21 15:55:33 发布
最新推荐文章于 2024-09-21 15:55:33 发布
阅读量354 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ruofengchen/archive/2012/10/22/2734135.html
版权

   最近在学习jquery，自己写了一个下拉框的搜素功能，比较简单，在IE8，FireFox，chrome浏览器中都没问题。

代码

<html>
 <head>
<style type="text/css">
<!--
.searchshowres {
  position:absolute;
  width:199px;
  height:100px;
  z-index:1;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: outset;
  border-left-style: outset;
}



body,td,th {
  font-size: 9pt;
}
-->
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<SCRIPT language="JavaScript">

$(function(){
     $(".searchtxt").bind("keyup", function(){
        var $stxt = $(this);
        var value = $stxt.val();
        var otxt = '';
        //遍历select的option的文本中包含输入的文本内容的option集合
        $stxt.next(".searchsel").children("option:contains('"+value+"')").each(function(){
            otxt += "<span class='searchresval' code='"+$(this).attr("value")+"' style='width:147;cursor:hand' >"+$(this).text()+"</span><br>";
        });
        //在select框下展现搜索的结果
                $stxt.prev(".searchshowres").show()
                           .children(".searchres").empty().append(otxt)
                            .children('.searchresval').bind("mouseover", function(){//鼠标移到移出索索结果上的一个颜色变化
                               $(this).css("background", "#cccccc");
                            }).bind("mouseout", function(){
                               $(this).css("background", "#ffffff");
                            }).bind("click", function(){
                               $stxt.val($(this).text());
                               $stxt.prev(".searchshowres").hide();
                               $stxt.next(".searchsel").children("option[value='"+$(this).attr("code")+"']").attr("selected", true);
                                                                                                                                          
                            });
                                                                                                              
       
     });

     $(".searchSel").bind("change", function(){
        $(this).prev(".searchtxt").val($(this).find("option:selected").text());
     });
});
</script>
 </head>
<body>

<div class="searchshowres" style="display:none;left:9px;top:37px;">
    <div class="searchres"></div>
</div>
<input class="searchtxt" style="width:200px;POSITION: absolute" >
  <select class="searchsel" style="width:217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">
  <option value="" selected></option>
  <option value="我们">我们</option>
  <option value="张一">张一</option>
  <option value="张二">张二</option>
   <option value="张四">张四</option>
  <option value="李二">李二</option>
   <option value="爱在西元">爱在西元</option>
   <option value="在爱西元">在爱西元</option>
   <option value="西元">西元</option>
   <option value="快发现">快发现</option>
   <option value="在问">在问</option>
   <option value="在问2">在问2</option>
   <option value="在问3">在问3</option>
   <option value="在使用">在使用</option>
   <option value="微软">微软</option>
   <option value="拼音输入法">拼音输入法</option>
   <option value="部分">部分</option>
   <option value="笔输入">笔输入</option>
   <option value="每次">每次</option>
   <option value="每次有">每次有</option>
   <option value="按下">按下</option>
   <option value="都会触">都会触</option>
   <option value="事件">事件</option>
   <option value="事件啊">事件啊</option>
  </select>

<p style="height:150px">&nbsp;</p>

<div class="searchshowres" style="display:none;left:9px;top:193px;">
    <div class="searchres"></div>
</div>
<input class="searchtxt" style="width:200px;POSITION: absolute" >
  <select class="searchsel" style="width:217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">
  <option value="" selected></option>
  <option value="我们">我们</option>
  <option value="张一">张一</option>
  <option value="张二">张二</option>
   <option value="张四">张四</option>
  <option value="李二">李二</option>
   <option value="爱在西元">爱在西元</option>
   <option value="在爱西元">在爱西元</option>
   <option value="西元">西元</option>
   <option value="快发现">快发现</option>
   <option value="在问">在问</option>
   <option value="在问2">在问2</option>
   <option value="在问3">在问3</option>
   <option value="在使用">在使用</option>
   <option value="微软">微软</option>
   <option value="拼音输入法">拼音输入法</option>
   <option value="部分">部分</option>
   <option value="笔输入">笔输入</option>
   <option value="每次">每次</option>
   <option value="每次有">每次有</option>
   <option value="按下">按下</option>
   <option value="都会触">都会触</option>
   <option value="事件">事件</option>
   <option value="事件啊">事件啊</option>
  </select>

</body>
</html>


 

如下：

 

 

转载于:https://www.cnblogs.com/ruofengchen/archive/2012/10/22/2734135.html

weixin_30872337
关注
jQuery实现带搜索功能的下拉框
05-02
jQuery searchableSelect实现带搜索功能的下拉框
使用Jquery实现带有搜索框的下拉框
10-23
使用Jquery实现带有搜索框的下拉框，里面有已经实现的实例。其中的异步加载数据需要自己手动填写或者做一些临时数据也可以。
jQuery插件：jQuery-searchableSelect可搜索下拉框
u013938578的博客
02-21 1309
效果如下：下载地址：带搜索框的jQuery下拉框美化插件 searchable 完整代码如下：
仿制百度下拉列表搜索框的jQuery实现方法
最新发布
weixin_42402664的博客
09-21 1531
本文还有配套的精品资源，点击获取 简介：利用jQuery的强大功能，本项目旨在模拟百度搜索引擎的下拉列表搜索功能，提升用户搜索体验。项目将介绍如何通过jQuery的DOM操作、事件处理及Ajax交互实现智能模糊查询。从HTML结构构建、CSS样式美化、jQuery事件监听、动态内容更新到动画效果实现，每一个环节都被详细规划，以提供一个用户友好且响应迅速的搜索框。本项目还将探...
jQuery的select2下拉框的搜索功能(使用select2插件，方便简单)
热门推荐
wJulio的博客
07-04 3万+
第一步: 引入我们用使用的插件 jquery: <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> select2： css: <link href="https://cdnjs.cloudflare.com/aj...
jquery实现带搜索的下拉框
duantianya2012的博客
02-01 4296
jquery实现带搜索的下拉框小白菜就不多说了，因为知之甚少。 这是hmtl的样式 * {margin:0;padding:0;} .dropdown {display:inline-block;width:200px;height:28px;border:1px solid #808080;position:relative;}
jquery下拉框集成搜索功能
01-25
在实现下拉框搜索功能时，通常我们会使用一个输入框（input element）作为搜索字段，监听其`keyup`事件，当用户输入字符时触发搜索。我们可以创建这样一个输入框，并将其与下拉框关联起来： ```html <!-- 下拉框...
利用Jquery实现可多选的下拉框
12-09
`jquery.js`是jQuery的核心库，`jquery-ui.css`和`jquery-ui.min.js`是jQuery UI的样式和脚本，`jquery.multiselect.js`和`jquery.multiselect.css`则是实现多选下拉框功能的插件文件。 接下来，在HTML中定义一个...
jQuery移动端下拉框带搜索功能.zip
11-19
本压缩包"jQuery移动端下拉框带搜索功能.zip"包含了实现这一功能所需的所有资源，包括一个使用须知文档和一个核心的JavaScript文件。 1. **jQuery简介** jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、...
jQuery手机下拉框select
11-03
总的来说，`jQuery手机下拉框select` 是通过jQuery Mobile库实现的一种优化移动端用户体验的解决方案。它提供了丰富的样式、交互和功能特性，帮助开发者创建出更符合移动设备需求的下拉菜单。通过理解和应用这些技术...
jquery实现必应的自动下拉搜索功能
u014041540的博客
09-14 809
body{background-color: #333;} .big-img{background-image: url(img/river.jpg); background-repeat: no-repeat; width:1228px;height:690px;margin: 0 auto;position: relative;} .logo{background: url(im
jquery带搜索的下拉框(可模糊搜索)
06-28
看其他csdn博主收分太高，所以将此资源上传，希望有需要的朋友可以下载。
jQuery可搜索下拉框插件
11-15
Combo Select 是一款友好的 jQuery 下拉框插件，在 PC 浏览器上它能模拟一个简单漂亮的下拉框，在 iPad 等移动设备上又能回退到原生样式。Combo Select 能够对选项进行检索过滤，同时支持键盘控制。
Jquery带搜索框的下拉菜单
12-09
1.样式引用： 代码如下:     <link rel=”stylesheet” href=”~/Js/Ddl_Chosen/chosen.css” /> 2.由于应用了Jquery，所以引用Jquery。(下载地址) 代码如下:         [removed]” type=”text/javascript”>[removed] 3.相关Js配置 代码如下:        <asp:DropDownList ID=”ddlCountry” runat=”server” data-placeholder
jQuery带搜索功能的下拉框，可以动态添加数据，实现级联效果
03-07
jQuery带搜索功能的下拉框，可以动态添加数据，实现级联效果。效果图参看博客：https://blog.csdn.net/BigBoySunshine/article/details/88293931
jquery select插件带搜索框的下拉选择框代码
08-24
jquery.searchableSelect。select插件，jQuery下拉选择框代码。带搜索功能的选择框代码。
jQuery实现可输入搜索文字的下拉框
vip_linux的专栏
10-24 1784
jQuery实现点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面先看效果     功能：点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面。  用的的js：  复制代码代码如下: var $xialaSELECT;  $(document).
JQUERY的 搜索下拉框
weixin_30342209的博客
01-12 79
<select name="supplier_id"> <option>小</option> <option>小超</option> <option>小超人</option> </select> <link rel="stylesheet" typ...
jQuery动态搜索下拉框
阿昊的博客
06-29 1269
一，代码 input.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>解决问题no解决代码问题</title> <script type="text/javascript" src="http://code.jquery.com/jquer
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值