Невозможно сделать ссылки кликабельными в автозаполнении jQuery - PullRequest
Новая
       5

Невозможно сделать ссылки кликабельными в автозаполнении jQuery

3 голосов
/ 10 апреля 2011

Я перезаписываю jQuery Autocomplete для отображения простых ссылок (<a href=...> ") и некоторого дополнительного форматирования, которое позже потребуется усложнить.

Ничего не происходит, когда ссылки нажимаются. Есть ли способ удалить любой обработчик событий или другой код, перехватывающий щелчки, чтобы они вели себя как положено?

Есть несколько связанных вопросов (например, # 4536055 ) с хорошими ответами, но они касаются поведения автозаполнения по умолчанию. Ответ source выглядит как хак - ссылки должны работать как ссылки.

Мой код: 

$.widget( "custom.complete_custom", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            // Trigger a "See all" link if there are two many results
            var self = this;
            var too_long = false;
            if (items.length > 10){
                original_length = items.length;
                too_long = true;
                items = items.slice(0,10);
            }

            // Display each result as a link
            $.each( items, function( index, item ) {
                ul.append( "<li class='ui-autocomplete-category'><a href='/building/" + item.buildingcode + "'>" + item.buildingname + "</a></li>" );
            });

            // Add the "See all" link if necessary
            if(too_long) {
                ul.append( "<li class='ui-autocomplete-category see-all'><a href='/search/" + 'term' + "'><strong>See all " + original_length + " results</strong></a></li>" )
            } 
        }
    });


    // The autocomplete activator
    $( "#search" ).complete_custom({
    source: "/search/json",
        minLength: 2
    });

Ответы [ 2 ]

0 голосов
/ 04 июня 2013

Возможно, уже слишком поздно, но может быть полезно для других пользователей.

Мы получаем с этим кодом: 

$.ui.autocomplete.prototype._renderItem  = function( ul, item ) {   
                        var re = new RegExp("^" + "$&") ;
                        var t = item.label.replace(re,"<span>" + "$&" + "</span>");            
                        return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<A>" + item.label + "</A>" )
                            .appendTo( ul );
                    };

Теперь вы можете изменять мысли внутри поля «метка» данных массива.

Мы добавили, например, несколько новых таблиц внутри каждой метки, но вы также можете добавить ссылки.

Bye

0 голосов
/ 10 апреля 2011

Автозаполнение пользовательского интерфейса jQuery использует теги a внутри себя во многих местах (с учетом его JS и CSS), поэтому попытка изменить их поведение так, как они не намеревались, может работать непредсказуемо.Функция _ renderItem оборачивает каждый элемент автозаполнения в теги a уже с одной стороны, поэтому вы будете помещать ссылки внутри ссылок.Я уверен, что это возможно со временем и усилиями, но когда другой ответ работает и его легко реализовать, это, безусловно, лучший вариант?Даже если использование перенаправления JS, а не прямой ссылки, немного хакерство.

...