jQuery Autocomplete 自动补全功能终极解决方案

在我们开发的项目中，经常会遇到这种需求，给一个输入框，输入关键字来自动模糊匹配给出详细的数据，选择它自动补齐到输入框中。

但是，有的时候，我们不想要输入框中已匹配好选中的字符串，而是要选中数据的其它属性值，这时候怎么办呢？新手快来看看吧，哈哈哈

1、本案例使用jQuery UI 1.8.13 版本

2、HTML页面示例

<form>
    <table class="table-form">
        <tr>
            <th>品牌：</th>
            <td>
                <input type="text" id="carBrandName" name="carBrandName />
                <input type="hidden" name="carBrandId" id="carBrandId" value=""/><!-- 实际上我们需要这个值 -->
                
            </td>
        </tr>
    </table>
</form>


<script>
    $(function(){
        var nameInput = $("#carBrandName");
        if (nameInput.autocomplete().data("autocomplete") != undefined) {
            nameInput.autocomplete(
                    {
                        change: function( event, ui ) {
                            // event 是当前事件对象
                            // ui对象仅有一个item属性，它表示当前选择的菜单项对应的数据源对象
                            // 该对象具有label和value属性，以及其它自定义(如果有的话)的属性
                            // 如果当前没有选择的菜单项，这item属性为null

                            if (ui.item == null) {
                                nameInput.val("");
                                return false;
                            }
                        },

                        source:function (request, response) {  
                           //需要从后台查询数据
                            $.ajax( {
                                url: "/data/listCarBrand.action",
                                dataType: "json",
                                data: {
                                    brandName: request.term
                                },
                                success: function( data ) {
                                    console.log(data)
                                    response( data );

                                }
                            } );
                        },

                        select:function (event, ui) {
                            //重点在这！！！！设置hidden的值
                            nameInput.val(ui.item.carBrandName);
                            $("#carBrandId").val(ui.item.carBrandId);
                            return false;
                        }
                    }).data("autocomplete")._renderItem = function (ul, item) {
                        //拼装html添加到ul上，a标签下的item.xxx就是从后台组装的属性值
                        return $("<li></li>").data("item.autocomplete", item).append(
                                "<a>" + item.carBrandName + "</a>").appendTo(ul);
                    };
        }


    });

</script>

3、Java后台数据代码示例

    /**
     * 自动补齐搜索需要的数据示例  
     */
    @RequestMapping("/data/listCarBrand.action")
    @ResponseBody
    public JSONArray listCarBrand(HttpServletRequest request) {
        HashMap<String, Object> filter = buildFilter(request);
        JSONArray array = new JSONArray();
     
        //条件查询数据
        List<CarBrand> listCarBrand = carBrandService.listCarBrand(filter);
      
        //组装搜索需要的数据
        for(CarBrand carBrand : listCarBrand) {
            JSONObject json = new JSONObject();
            json.put("carBrandId",carBrand.getId());
            json.put("carBrandName",carBrand.getBrandName());
            array.add(json);
        }
        //返回json数组
        return array;

    }

4、前端展示自动补全的数据

此时，我们需要的hidden值，已经随选择的数据改变而改变了。希望能帮到新手或者没有遇到过此场景的人。

jQuery Autocomplete 自动补全功能终极解决方案

猜你喜欢