jQuery自动完成与类别选择 [英] jquery autocomplete with category selection

问题描述

我正在使用带有类别选项的jquery automplete，一切正常.现在我想使类别可以选择.我经历了很多事情，但是没有任何作用.有没有办法使类别可选择而不是标签. /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;
    },      
}); 

解决方案

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

我做了什么

• 为类别选项添加了一个单击事件侦听器，它将调用selectHandler()来处理从自动完成列表中选择的选项.
• 通过将ui-menu-item类添加到<li>标签来将类别选项构建为菜单项，这将赋予类别选项与列表中其他选项相同的视觉效果.

实时演示@ JSFiddle:

http://jsfiddle.net/dreamweiver/bp0x1yc4/11/

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);
};

快乐编码:)

I am using jquery automplete with category option, everything is working fine.Now i want to make categories select-able.I have gone through many things but nothing is working.Is there any way to make category selectable not label.

My code is as below:

$.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;
    },      
}); 

解决方案

This will solve your problem , but may not be the best solution.

What I have done

• added a click event listener for the category option and it would call the selectHandler() to process the selection of the option from the autocomplete list.
• building the category option as a menu item by adding ui-menu-item class to the <li> tag, which will give the category option the same visual effects as that of other options in the list.

Live Demo @ JSFiddle:

http://jsfiddle.net/dreamweiver/bp0x1yc4/11/

JS Code :

$(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);
};

Happy Coding :)

这篇关于jQuery自动完成与类别选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！