单击jQuery自动完成时触发select事件 [英] Firing the select event on click for jQuery autocomplete

问题描述

稍微使用jQuery的自动完成功能后，我无法点击选择事件。这很奇怪，因为当鼠标拖过列表中的每个元素时会触发onfocus事件。从我到目前为止所尝试的情况来看，看起来并没有内置的方法可以点击onclick选择事件。我错过了什么吗？或者，过去人们有另一种处理方式吗？

After playing around with jQuery's autocomplete feature a bit, I couldn't get the select event to fire onclick. Which is strange because the onfocus event fires when the mouse is dragged over each element in the list. From what I've tried so far, it doesn't look like there's a built in way to have the select event fired onclick. Am I missing something? Or is there another way that people have dealt with this in the past?

提前致谢，
Brandon

Thanks in advance, Brandon

推荐答案

所选事件应在点击时自动触发。请考虑以下代码块。在这里，我传递了一组处理程序，以决定使用什么URL，将自动完成行为附加到哪个标签等等。最终制作一个ajax请求来填充自动完成列表。

The selected event should fire automatically on click. Consider the following code block. Here I pass in a set of handlers to decide things like what url to use, what label to attach the auto complete behavior to etc. Ultimately making an ajax request to populate the auto complete list.

    ActivateInputFieldSearch: function (callBack, fieldID, urlHandler, labelHandler, valueHandler) {
        $("#" + fieldID).autocomplete({
            source: function (request, response) {
                var requestUrl;
                if (_.isFunction(urlHandler)) {
                    requestUrl = urlHandler(request);
                } else {
                    requestUrl = urlHandler;
                }
                $.ajax({
                    url: requestUrl,
                    dataType: "json",
                    data: {
                        maxRows: 10,
                        searchParameter: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            var dataJson = $.parseJSON(item);
                            return {
                                label: labelHandler(dataJson),
                                value: valueHandler(dataJson),
                                data: dataJson
                            };
                        }));
                    }
                });
            },
            minLength: 0,
            select: function (event, ui) {
                if (callBack) {
                    callBack(ui.item);
                }
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            },
            focus: function (event, ui) {
                $("#" + fieldID).val(ui.item.value);
            }
        });
    }

这篇关于单击jQuery自动完成时触发select事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！