前言

时间是2019.3-2019.4 

最近这个月忙到头炸，趁各方面都结束了来进行一波总结。

搜索下拉框要求显示sug

这个是我在公司里接到的一个后台需求，我一个写接口的让我去写后台界面。。

其中有个搜索下拉框实现实时搜索并显示sug,这个我就。。。

不能说：不会！  要说：我TM的虽然不会，但是我能做出来！

实现方式：

使用jquery-ui插件 ，其中有个autocomplete自动填充功能，配合ajax就能完成。

话不多说，上代码

javascript:

 $('#search_key_name').autocomplete({
            source: function( request, response ) {
            // request对象只有一个term属性，对应用户输入的文本
            // response在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
                $.ajax({
                    url: url,
                    dataType: "json",
                    data:{
                        search_key: request.term   // 搜索关键词
                    },
                    success: function( data ) {
                        response( $.map( data.data, function( item ) {  
                        // 此处是将返回数据转换为 JSON对象  
                            return {
                                label:item.name,    // 下拉项显示内容
                                value: item.name,    // 下拉项对应数值
                                //另外可以自定义其它参数
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function( event, ui ) {
             //event参数是事件对象，ui对象只有一个item属性，对应数据源中被选中的对象
               $('#search_key_name').val(ui.item.label);
                $('#search_key_value').val(ui.item.value);
                return;
            }
        })

html:

<link rel="stylesheet" href="jquery-ui-1.9.2.css" /> 
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<input type="text" id="search_key_name"  />  
<input type="text" id="search_value_name"  /> 

要是搜索下拉框没有出来，但是服务器返回了数据，那就是autocomplete组件被遮住了，也就是说它的z-index值太小可以设置

.ui-autocomplete{ z-index: 9999 !important; }
//设置z-index足够大才能显示在最上层

这样这个就能实现下拉搜索了，要是想要好看的样式可以使用boostrap样式即可。