Jquery 自动完成，使类别可点击

Question

我正在使用 jquery 自动完成类别，我想让类别作为项目可点击。

$(function() {
$("#js_autocomplete_ville").autocomplete({
    source: "ajax_villes.php",
    delay: 100,
    minLength: 1, 
    select: function(event, ui) {
        $('#js_searchform').prepend('<input type="hidden" name="villeid" value="' + ui.item.label + '">');
    },
    create: function() {
        $('.ui-autocomplete').addClass('ui-front');
        var currentDepartement = "";
        var currentVilleDepartement = "";
        $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
            if (item.dep_nom != currentDepartement) {
                ul.append("<li class='js_level1 ui-autocomplete-category' id='li_" + item.num_departement + "'>" + item.dep_nom + " (" + item.num_departement + ")</li>");
                currentDepartement = item.dep_nom;
            }
            var itemVilleDepartement = item.dep_nom + item.v_nom;
            if (itemVilleDepartement != currentVilleDepartement) {
                currentVilleDepartement = itemVilleDepartement;
                return $("<li class='js_level2' id='" + item.label + "'>")
                        .append('<a>' + item.value + '</a>')
                        .appendTo(ul);

            } else {
                return $("")
                        .append('')
                        .appendTo(ul);
            }
        };
    },
    focus: function(event, ui) {
        $("#js_autocomplete_ville").val(ui.item.value);
        return false;
    },
    // optional
    open: function(event, ui) {
        $(".ui-autocomplete").css("z-index", 1000);
    }
});});

我尝试在 'select' 事件中做一些测试，但没有结果！可能吗？有任何想法吗？谢谢你的帮助，威利

Answer 1

是的，但由于添加的项目是动态的，您需要使用附加到不变祖先元素的委托事件处理程序：

例如类似于：

$(document).on('click', '.js_level1', function(){
   alert(".js_level1 clicked!");
});

它的工作原理是侦听冒泡事件，然后应用 jQuery select 或事件时间，而不是 事件注册 时间。这意味着元素只需要在您单击时出现。

document 是默认值，如果你没有更近的元素，你可以 select。切勿将 'body' 用于委托事件，因为样式会阻止 body 响应冒泡点击事件。

注意： 没有代码运行（例如在 JSFiddle 中）我不能更具体

Answer 2

这是我的解决方案，感谢 TrueBlueAussie

$(document).on('click', '#ui-id-1 .js_level1', function() {
var inputValue = $(this).attr('id');
var inputLabel = $(this).text();
$("input[name='ville_id_moteur']").val(inputValue);
$("input[name='ville']").val(inputLabel);
$("#js_autocomplete_ville").autocomplete("close");

});

再见，威廉

Jquery 自动完成，使类别可点击

Jquery autocomplete, make categories clickable

javascript

jquery

autocomplete

categories