Question

我希望在无序列表中返回以下搜索结果，其中包含此类名称＆＃34; my-results＆＃34;。我无法弄清楚下面的代码中应用我的班级名称。

HTML是动态生成的。页面上没有预先存在的静态元素：

<ul class="my-results"></ul>

这是我正在使用的功能。

$(document).ready(function() {
    var cache = {};
    $( '#top-search-input' ).autocomplete({
        source: function( request, response ) {
            if (request.term in cache) {
                response(cache[request.term]);
                return;
            }
            $.ajax({
                url: "http://example.com/search", 
                data: {
                    q: "*" + request.term + "*",
                    type: "Search",
                    view: "json",
                },
                dataType: "json",
                success: function( data ) {
                    if (data.length) {
                        cache[request.term] = data;
                    }
                    response(data);
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            window.location = ui.item.url;
        },
    }).data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
        var elemHTML = $('<a></a>').attr('href', item.url);
            elemHTML.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
            elemHTML.append('<span class="title">' + item.title + '</span>');
        return $( '<li class="ui-menu-item" >' )
            .append( elemHTML )
            .appendTo( ul );
    };
});

Answer 1

在代码集的最后一行之后：

$("ul").addClass("my-results");

Answer 2

$('.my-results').html('your li list code here');

Answer 3

更新：替换

的内部部分

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

到此：

var elemHTML = $('<a></a>').attr('href', item.url);
        elemHTML.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
        elemHTML.append('<span class="title">' + item.title + '</span>');
       // alert($('body').find('ul').hasClass("my_result"));
        if($("ul").hasClass("my_result")){
          //  console.log('if');
            return $('ul').append($( '<li class="ui-menu-item" >' )
                    .append( elemHTML ).append('</li>'));
        }else{
            // console.log('else');
        return  $('<ul class="my_result" >').append($( '<li class="ui-menu-item" >' )
                .append( elemHTML ).append('</li>')).appendTo('body');
        }

它应该适合你。

如何将CSS应用于这个jQuery函数的结果？

3 个答案: