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值，已經隨選擇的數據改變而改變了。希望能幫到新手或者沒有遇到過此場景的人。