Сделать внутри jQuery автозаполнение кликабельным

Мне удалось добавить ссылку справа от элементов автозаполнения jQuery, используя следующий код: 



function onClientSelect(event, ui) {

    // My handling code goes here

    event.preventDefault();

}



$("#mypage input[name='client']").autocomplete({

    minLength: 1,

    appendTo: $(this).parent(),

    source: '/filter_client/',

    select: onClientSelect,

    focus: function (event, ui) {

        event.preventDefault();

    },

}).data("ui-autocomplete")._renderItem = function (ul, item) {

    return $("<li></li>")

        .data("item.autocomplete", item)

        .append("<a>" + item.label + "</a>")

        .appendTo(ul);

};


Мой сервер возвращает метку элемента в следующем формате: 



<div class="ac-item-lb">My Item Label</div>

<a class="ac-item-a" href="/url_to_go_to/" target="_blank">View Detail</a>


То, что я хочу сделать, это открыть ссылку в новой вкладке, когда я нажимаю на "просмотр подробностей", который, нажав любую другую область, выполняет onClientSelect так же, как обычно. Однако в настоящее время щелчок левой кнопкой мыши по ссылке также выполняет onClientSelect. Единственный способ открыть ссылку-нажать на среднее колесо или правую кнопку мыши и выберите "Открыть в новой вкладке".



Я попытался прикрепить обработчик событий click к ссылке с событием.stopImmediatePropagation () но это, кажется, не работает. У кого-нибудь есть идеи, как это исправить?

565   5  

5 ответов:

Один из способов сделать это-определить пользовательскую функцию select и не использовать <a> для ссылок

HTML: 

<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

JS: 

 var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

$("#tags").autocomplete({
    source: availableTags,
    select: function (event, ui) {
        var elem = $(event.originalEvent.toElement);
        if (elem.hasClass('ac-item-a')) {
            var url = elem.attr('data-url');
            event.preventDefault();
            window.open(url, '_blank ');
        }
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append('<a>' + item.label + '<span class="ac-item-a" data-url="http://www.nba.com"> View Details</span></a>')
        .appendTo(ul);
};

JSFIDDLE .

21  
2015-06-26 17:36:21

Вы думали о том, чтобы поместить условное условие в обработчик кликов, чтобы не preventDefault когда именно это звено? Если вы проверяете, должен ли элемент функционировать нормально, то вы можете return раньше preventDefault, а затем ссылка должна функционировать нормально.

Вот пример (JSBin):

function clickHandler(e) {
  // If the target element has the class `test-clickable` then the
  // function will return early, before `preventDefault`.
  if (this.className.indexOf('test-clickable') !== -1) {
    return;
  }

  alert('That link is not clickable because of `preventDefault`');
  
  e.preventDefault();
}

$('a').click(clickHandler);
a {
  display: block;
}
a:after {
  content: ' [class=' attr(class)']';
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <a class='test-clickable' href='http://www.google.com' target='_blank'>Link</a>
  <a class='test-not-clickable' href='http://www.google.com' target='_blank'>Link</a>
</body>

</html>
5  
2015-06-27 00:38:03

Амир, что касается вашего ответа, я думаю, что открытие окна внутри функции javascript из события select может быть заблокировано PopupBlocker

Pinghsien422, ваша серверная сторона должна вернуть Json, а не полный html, если вы должны вернуть полный html, внесите следующие изменения:

1.Удалите функцию clientSelect

2.No тег ' a ' необходим в функции renderData 

 $("#mypage input[name='client']").autocomplete({
   minLength: 1,
  appendTo: $(this).parent(),
   source: '/filter_client/',
  focus: function (event, ui) {
    event.preventDefault();
  },
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
    .data("item.autocomplete", item)
    .append( item.label )
    .appendTo(ul);
};
3  
2015-06-21 09:24:55

Хорошо, событие jquery имеет приоритет над вашим событием select - независимо от того, что вы делаете, вы не можете ничего остановить. Но вы можете проксифицировать событие menuselect, а затем решить, следует ли его вызывать (jsfiddle ).

var ac = $("#mypage input[name='client']").autocomplete({
    minLength: 1,
    appendTo: document.body,
    source: availableTags,
    focus: function (event, ui) {
        event.preventDefault();
    },
}).data("ui-autocomplete");
ac._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
    .append("<div>"+item.label+"<a class='link' href='http://test'>(http://test)</a></div>")
        .appendTo(ul);
};
var ms = $._data(ac.menu.element.get(0), 'events').menuselect[0].handler;
ac.menu.element.off("menuselect");
ac.menu.element.on("menuselect", function (ev) {
    if($(ev.originalEvent.target).hasClass("link"))
        return;
    ms.apply(this,arguments);
});
3  
2015-06-28 12:22:30

Попробуйте сделать even.stopImmediatePropagation в onclick привязку к ссылке. Страница открывается, а обработчик выбора не выполняется.

var li = $("<li></li>")
    .data("item.autocomplete", item)
    .append('<a class="ac-item-a" href="http://www.nba.com">' + item.label + '</a>')
    .appendTo(ul);

li.find('a').bind('click', function(event){ event.stopImmediatePropagation() });

return li;
1  
2015-06-24 15:52:30

Comments

    Ничего не найдено.
Click here to cancel reply.