jQuery 异步模糊查询 实现下拉搜索功能

<style>
            .bdsug {
                background: none repeat scroll 0 0 #fff;
                border: 1px solid #ccc;
                box-shadow: 1px 1px 3px #ededed;
                display: none;
                position: absolute;
                width: 538px;
                z-index: 1;
            }
</style>

供应商:<input name="isResult" id="isResult" type="hidden" />
                 <input name="companyname" id="companyname" value="" />
                 <div id="isShowCompanyName" ></div>
                 <div  class="bdsug" style="height: auto;" id="showCompanyname"></div> <br/>

var timer="";
//异步模糊查询供应商
$("#companyname").keyup(function(){
    clearTimeout(timer);
    $("#showCompanyname").empty();
    var companyname = $("#companyname").val();
    //alert(companyname);
    if(companyname){
    
    timer = setTimeout(function(){
        $.ajax({
               url: "<%=request.getContextPath() %>/initSkuAction!likeClient.action",
               type: "POST",
                  data : { "companyname":companyname },
               async:true,
               dataType:"json",
               success:function(data){
                   if(data&&data.list&&data.list.length){
                       var $ul =$("<ul></ul>");
                       for(var i=0;i<data.list.length;i++){    
                           var $li = $("<li></li>");
                           $li.text(data.list[i].companyName);
                           $ul.append($li);
                           $li.click(function(){
                           
                               $("#companyname").val($li.text());
                               $("#showCompanyname").hide();
                               $("#isResult").val(1);
                           
                           });
                       }
                       $("#showCompanyname").append($ul).show();
                   }else{
                   $("#isResult").val(0);
                   }
               }
            });},500);
        }else{
            $("#isResult").val(0);
            $("#showCompanyname").hide();
        }
    }).blur(function(){
        if($("#isResult").val){
            $(this).val("");
        }
    });

$("body").click(function(){
    $("#showCompanyname").attr("style", "display:none");//单个属性的设置

});

时间: 2024-08-03 17:15:35

jQuery 异步模糊查询 实现下拉搜索功能的相关文章

iOS实现tableView下拉搜索功能

iOS实现tableView下拉搜索功能 地址:github地址 效果展示 JRSearchBar /// 搜索 -> array - (NSMutableArray *)searchTest:(NSString *)searchText InArray:(NSArray *)array;

vue的模糊查询和下拉菜单修改信息------------学习记录

HTML代码<div id="box"> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-heade

模糊查询的下拉框

css部分: <style type="text/css"> #demo-wrap{position:relative;margin:20px;width:260px;overflow:hidden;border:1px solid #DDD;} #demo-wrap .product-head p{font-size:14px;font-family:Arial,Helvetica,sans-serif;margin:5px 3px 5px;padding:0 0 5px

有模糊查询的下拉框

1.引用(引入是有顺序的) <link href="jquery.searchableSelect.css" rel="stylesheet" type="text/css"> <script src="jquery-1.11.1.min.js"></script> <script src="jquery.searchableSelect.js"></s

jQuery如何实现点击下拉菜单的隐藏和显示

jQuery如何实现点击下拉菜单的隐藏和显示:在众多的网站都有这样的效果,那就是点击一个父菜单就会显示下拉子菜单,再点击父菜单,那么子菜单就会隐藏,下面就简单介绍一下如何实现此中效果.这里只介绍如何使用jQuery实现此效果,暂且不考虑效果的美观度,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" co

yii2 GridView 下拉搜索实现案例教程

作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dropdown_search本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 下拉搜索,我们先来看看预期的效果图 具体怎么实现喃?考虑到一张数据表要下拉效果的字段可能有很多个,我们先在其model中实现一个方法方便后续操作 /** * 下拉筛选 * @column string 字段 * @value mix 字段对应的

Jquery+json绑定带层次下拉框(select控件)

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

Xamarin. Android实现下拉刷新功能

下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. Android中要实现一个好用的下拉刷新功能却不是很容易,在网上找了几个Xamarin.Android的下拉刷新控件,都不是很满意,所以想重新绑定一个java写的下拉刷新控件.在网上找了几个这样的开源库,通过对比发现android-pull-to-refresh实现的功能比较多,实现的效果也比较满意. Android-Pull-To-Refresh项目地址:http

android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)

Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableListView,GridView,WebView等. 下载地址:https://github.com/chrisbanes/Android-PullToRefresh 首先第一步当然是导入libriay到咱们的项目了,具体导入方式,这里不再赘述. 下面是个例子采用的是ListView,当然其余的和这