Я пытаюсь использовать плагин автозаполнения пользовательского интерфейса Jquery, и я хотел бы сделать HTML-код в окне подсказок с интерактивными ссылками.HTML выглядит нормально, но когда я нажимаю на ссылки, они не работают, и я попадаю в свой журнал разработчиков:
jquery-ui.min.js:239Uncaught TypeError: Cannot call method 'data' of null
Uncaught TypeError: Cannot call method 'data' of null
a.widget._create.menu.a.addClass.appendTo.mousedown.menu.selectedjquery-ui.min.js:239
a.Widget._triggerjquery-ui.min.js:23
a.widget.selectjquery-ui.min.js:252
a.widget._createjquery-ui.min.js:247
f.event.handlejquery.min.js:17
f.event.add.k.i.handle.k jquery.min.js:16
Я использую следующий код на стороне HTML и Jquery,синтаксис Haml как в Rails.В первом теге сценария я просто определяю шаблон, который затем отображаю с помощью Underscore.js.
Этот вопрос , похоже, относится к аналогичной проблеме, но я не понимаю ответа "I think autocomplete uses an <a> for the element that provides the click event. In that case, you'll need to unset that click handler"
Буду признателен за любые рекомендации!Прошло 2 дня, я застрял на этом.Спасибо!
= text_field_tag :search, nil, :class => "jq_watermark", :id => "product-search-input", :title => "Keywords, Tags, Items, SKU..."
%script(type="text/html" id="product-autocomplete-result-template")
.cell.img
%img(src='{{ main_image_thumb }}')
.cell
%h2= link_to '{{ label }}', CGI::unescape(product_path('{{ id }}'))
.clear
= link_to '{{ customer_count }} people have this', '#'
%span Rating {{ rating }}
%div{:id => "stars-wrapper-{{ id }}"}
%select= options_for_select([1, 2, 3, 4, 5])
%a(href='http://www.google.com')
Click Me
.cell
= link_to "I have this", '#', :class => "button"
= link_to "I want this", '#', :class => "button"
:javascript
$(document).ready(function(){
$.ui.autocomplete.prototype._renderItem = function( ul, item ) {
var template = $('#product-autocomplete-result-template').html();
var parsed_template = _.template(template, item);
var target_option = 'value="' + item.rating + '"'; // do simple string replace to select option, as I can't get Jquery
var selected_option = target_option + ' selected="selected"';
var autocomplete_html = parsed_template.replace(target_option, selected_option);
var returnVal = $( "<li></li>" )
.data( "item.autocomplete", item )
.append('<a>' + autocomplete_html+'</a>')
.appendTo( ul );
$("#stars-wrapper-"+item.id).stars({ inputType: "select", disabled: true });
return returnVal;
};
$('#product-search-input').autocomplete({
delay: 50,
source: function(request, response) {
$.ajax({
url: "#{search_products_path}",
dataType: 'json',
data: { term: request.term },
success: function(data) {
if (data.length < 1) {
console.log("Juuusstt right");
// show submit button
} else {
console.log("Too long");
// hide submit button
}
response(data);
}
});
},
select: function( event, ui ) {
console.log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
}
})
});