-1

我用户jquery autocomplete获取一些结果并显示结果,但是当我单击侧面时无法关闭返回结果的下拉菜单。

$(function () {
            $("#search").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("TestAutoComplete", "Home")', type: "POST", dataType: "json",
                        data: { query: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {

                                return {
                                    label: item.Title
                                };
                            }));
                        }
                    });
                },
                minLength: 1,
                select: function (event, ui) {
                    onItemSelect(ui.item);
                },
                open: function () {
                    $(this).removeClass('ui-corner-all').addClass('ui-corner-top');
                    $(this).autocomplete('widget').css('z-index', 999999);
                },
                close: function () {
                    $(this).removeClass('ui-corner-top').addClass('ui-corner-all');
                }
            })
        .data('ui-autocomplete')._renderItem = function (ul, item) {
            return $('<li>')
                .data('autocomplete-item', item)
                .append('<a href="#"><p  >' + item.label + "</p></a>")
                .appendTo(ul);
        };
        });
4

4 回答 4

1

非常愚蠢的错误。

 $("#search").autocomplete({...

它应该是

 $(".search").autocomplete({...

它工作。

于 2013-08-26T21:02:55.897 回答
0

仅查看您的 js,您的标记对我来说并不完全清楚,但它会是这样的:

$("html").on("click.autocomplete", function(e){
  var $targ = $(e.target || event.srcElement);
  if ( !$targ.is( /* searchlist */ ) || !$( /* searchlist */ ).has( $targ ).length ) {
    //Close autocomplete
    $("html").off(".autocomplete");
  }
});
于 2013-08-25T04:20:04.717 回答
0

您以某种方式让我们对您的实现视而不见,但假设解决方案是一个好的模式,如果单击的元素 (e.target) 位于搜索范围内,则在每次单击文档时检测到,否则关闭搜索框。

$(document).on('click', function(e)
{
    var jqTarget = $(e.target);
    if ( !jqTarget.closest('#search').length ) 
    {
        $("#search").hide();
    }
});
于 2013-08-25T04:59:58.663 回答
0
var that = $('.autocomplete'); //Define this somewhere in the page to refer later

$('document').on('mousedown', function(e){
if ($(e.target).closest('.autocomplete:not(:visible)').length != 0) {
        that.hide();
    }
});
于 2013-08-26T10:54:11.537 回答