jquery 下拉菜单模糊匹配搜索 jquery下拉菜单插件

转载

mob64ca1411a6fc 2023-11-02 09:36:53

文章标签 jquery 下拉菜单模糊匹配搜索 jquery ajax 插件多级联动 文章分类 jQuery 前端开发

话说这个插件，我也用了挺久了，但一直对其具体的作用不是很懂，只知道可以利用 ajax来请求数据，实现类似于多级联动的效果。后来百度了下，在此做个总结吧。

下面是以一名php程序员的角度来分析的。。。可能和前端同学分析的角度不大一样，见谅。

一、jquery.cxselect.js

（1）定义：cxSelect 是基于 jQuery 的多级联动菜单插件，适用于省市、商品分类等联动菜单。列表数据通过 AJAX 获取（需要在服务器环境运行），也可以使用变量自定义，数据内容使用 JSON 格式。

（2）我们这里主要用到data 参数
      在父元素上的 data- 属性
      data-url 列表数据文件路径（此处只能设置路径，自定义需要在参数中设置）
      data-nodata 子集无数据时 select 的状态。
      data-required 是否为必选。
      data-first-title 所有下拉框的第一个项目的标题
      data-first-value 所有下拉框的第一个项目的值
例如：

data-url="{{url('/goods/get_type')}}

二、使用方法：

1、引入jquery和jquery.cxselect.js文件，这个大家都懂

2、项目中的应用：

<div class="control-group">
    <label class="control-label" for="focusedInput">绑定设备类</label>

<div class="controls">
     <fieldset id="goods_select">
         <select class="g_type" name="g_type" id="g_type" data-url="{{url('/goods/get_type')}}"></select>
          <select class="goods_info_id" name="goods_info_id" id="goods_info_id" data-url="{{url('/goods/get_id')}}" data-json-name="name" data-json-value="value"></select>
     </fieldset>
  </div>
 </div>

这个代码有点长。。
（1）这里用的是select选项框。
（2）name和id要保持一致，也是我们需要用到的参数。
（3）data-url:由于楼主用的是laravel，所有直接写的路由名称，相当于请求服务器，查询想要的结果，然后以Json的形式返回。这里也可以写成：data-url=”cityData.min.js”格式的。
（4）data-json-name对应的是name和value,和下面的js代码对应。

3、在页面结尾要有调用一下该方法：

<script>
    $("#goods_select").cxSelect({
        selects : ["g_type", "goods_info_id"],
        jsonName: 'name',
        jsonValue: 'value'
    });
</script>
</body>
</html>

（1）利用id选择器，声明要请求服务器的id名称，进行ajax的请求时需要的参数
（2）json的格式规范

4、date-url对应的服务器端的代码

/*
     * 获取某一设备分类下的相关设备
     * @param  type
     * @param  goods_info_id
     * @param  title
     * */
    public function get_id(Request $request)
    {
        $g_type = $request->input('g_type');
        $goods = DB::table('goods_info')->where('type','=',$g_type)->get();
        foreach($goods as $v)
        {
            $ret[] = [
                "name" => $v->title,
                "value" => $v->id,
            ];
        }
return response(json_encode($ret, JSON_UNESCAPED_UNICODE));
    }

（1）获取传过来的关键参数
（2）进行数据库查询
（3）将查询结果进行json的格式化，返回回去

5、效果图

jquery 下拉菜单模糊匹配搜索 jquery下拉菜单插件_插件