Question

我正在使用带有类别选项的jquery自动完成，一切都运行正常。现在我想让类别可选。我已经经历了很多事情，但没有什么工作。有没有办法让类别可选择不标签。< / p>

我的代码如下：

$.widget("custom.catcomplete", $.ui.autocomplete, {

    _renderMenu: function (ul, items) {
        var self = this;
        var currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    },

});

$('#city').catcomplete({
    delay:0,
    source : function(request, response) {
        $.ajax({
            url : '${createLink(controller:"city", action:"ajaxData")}',
            data : {
                term : request.term
            },
            dataType : "json",
            success : function(data) {
                if (data.length > 0) {
                    response( $.map( data, function( item ) {
                        return {
                            label: item.label,
                            value: item.category,
                            category: item.category,
                        }
                    }));   
                }
                else{ 
                    response([{ category: 'No results found', val: "",label:""}]);
                }
            }
        });
    },  
    focus: function(event, ui) {
        $("#city").val(ui.item.category);
        return false;
    }   ,
    select: function( event, ui ) {
        window.location.href = ui.item.category;
    },      
});

Answer 1

这将解决您的问题，但可能不是最佳解决方案。

我做了什么

为类别选项添加了一个点击事件监听器，它会调用selectHandler()来处理从自动填充列表中选择的选项。
通过将ui-menu-item类添加到<li>标记，将类别选项构建为菜单项，这将为类别选项提供与列表中其他选项相同的视觉效果。

现场演示@ JSFiddle：

Android-Week-View

JS代码：

$(document).on('click', '.ui-autocomplete-category', function () {
    $("#search").val($(this).html());
    $("#search").catcomplete("close");
    selectHandler($(this).html());
});

var selectHandler = function (data) {
    //process selected data
    console.log("selected value: " + data);
};

快乐编码：）

Answer 2

我已根据要求定制了自动完成

$(function () {
        $.widget("custom.catcomplete", $.ui.autocomplete, {
            _create: function () {
                this._super();
                this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
                this.widget().addClass("sw_autocomplete");
            },
            _renderMenu: function (ul, items) {
                var that = this,
                  currentCategory = "";
                $.each(items, function (index, item) {
                    var li;
                    var itemType = "";
                    if (item.isCity) {
                        itemType = "City";
                    }
                    if (item.country == '-sky') {
                        itemType = "Country";
                        return;
                    }
                    li = that.__renderItemData(ul, item, itemType);
                    if (item.category) {
                        li.attr("aria-label", item.category + " : " + item.label);
                        li.attr("style", "padding-left:20px;");
                    }

                });
            },
            __renderItemData: function (ul, item, itemType) {
                return this.__renderItem(ul, item, itemType).data("ui-autocomplete-item", item);
            },
            __renderItem: function (ul, item, itemType) {
                if (itemType == "Country") {
                    return $("<li>")
                        .append($("<a>").html("<i class='fa fa-globe' aria-hidden='true'></i><span>" + item.label + "</span>"))
                        .appendTo(ul);
                }
                if (itemType == "City") {
                    return $("<li>")
                        .append($("<a>").html("<i class='fa fa-map-marker' aria-hidden='true'></i><span>" + item.label + "</span>"))
                        .appendTo(ul);
                }
                else {
                    return $("<li>")
                        .append($("<a>").html("<i class='fa fa-plane' aria-hidden='true'></i><span>" + item.label + "</span>"))
                        .appendTo(ul);
                }
            },
        });

        var UniqueCategory = "";
        var UniqueCityId = "";

        $("#flightFrom").catcomplete({
            delay: 0,
            select: function (event, ui) {
                $("#flightFrom").removeClass('error');
            },
            open: function () {
                $("#flightFrom").removeClass('error');
            },
            source: function (request, response) {
                $.ajax({
                    url: "http://partners.api.skyscanner.net/apiservices/xd/autosuggest/v1.0/UK/GBP/en-GB/",
                    dataType: "jsonp",
                    data: {
                        query: request.term
                    },
                    success: function (data) {
                        UniqueCategory = "";
                        UniqueCityId = "";
                        response($.map(data.Places, function (item) {
                            var sourceAirport = "";
                            if (item.PlaceId == item.CityId) {
                                UniqueCategory = item.PlaceName + ", " + item.CountryName + " (" + item.PlaceId + ")";
                                UniqueCityId = item.CityId;
                                return {
                                    label: item.PlaceName + ", " + item.CountryName + " (" + item.PlaceId.replace("-sky", "") + ")",
                                    value: item.PlaceName + ", " + item.CountryName + " (" + item.PlaceId.replace("-sky", "") + ")",
                                    isCity: true,
                                    sourceAirport: item.PlaceId
                                };
                            }
                            else {
                                if (item.CityId == UniqueCityId) {
                                    return {
                                        label: item.PlaceName + ", " + item.CountryName + " (" + item.PlaceId.replace("-sky", "") + ")",
                                        value: item.PlaceName + ", " + item.CountryName + " (" + item.PlaceId.replace("-sky", "") + ")",
                                        category: UniqueCategory,
                                        sourceAirport: item.PlaceId
                                    };
                                }
                                return {
                                    label: item.PlaceName + ", " + item.CountryName + " (" + item.PlaceId.replace("-sky", "") + ")",
                                    value: item.PlaceName + ", " + item.CountryName + " (" + item.PlaceId.replace("-sky", "") + ")",
                                    country: item.CityId,
                                    sourceAirport: item.PlaceId
                                };
                            }
                        }));
                    },
                });
            },
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="flightFrom">Flight From: </label>
<input id="flightFrom" style="width:300px">

在输入框中输入“新建”或“伦敦”。

这与我们在其中一个解决方案中使用的相同。

jquery自动完成与类别选择

2 个答案: