Question

我想仅设置来自此

的特定元素/部分的样式

我的代码： -

$('input[name=\'bar_home\']').autocomplete({
delay: 0,
minLength: 3,
source: function(request, response) {
    $.ajax({
        url: 'index.php?route=common/home/autocomplete&filter_name=' +  encodeURIComponent(request.term),
        dataType: 'json',
        success: function(json) {       
            response($.map(json, function(item) {
                return {
                    label: item.name + ' ' + '-' + ' ' + '%' + item.price,
                    value: item.product_id,
                }
            }));
        }
    });
}, 
select: function(event, ui) {
    url = 'index.php?route=product/product&product_id=' + ui.item.value;
    location = url;
    return false;
},
focus: function(event, ui) {
  return false;
 }
 }
 );

这是我要设计样式的两个元素

 '£', item.price

我想仅设置上面2个元素/部分的样式。就像我想改变这两个的颜色而不是

   **item.name**

如果您需要更多详细信息，请与我们联系。

Answer 1

我是按照@Omar发布的链接中提供的说明实现的。

这是我在上面的代码中添加之后我必须添加的内容： -

            $["ui"]["autocomplete"].prototype["_renderItem"] = function( ul, item) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( $( "<a></a>" ).html( item.label + '<span style="color:#CC3333">' + item.label2 + '</span>' ) )
            .appendTo( ul );
        };

这就是我的最终代码添加后的样子： -

    $('input[name=\'search_home\']').autocomplete({
delay: 0,
minLength: 3,
source: function(request, response) {
    $.ajax({
        url: 'index.php?route=common/home/autocomplete&filter_name=' +  encodeURIComponent(request.term),
        dataType: 'json',
        success: function(json) {       
            response($.map(json, function(item) {
                return {
                    label: item.name + ' ' + '-' + ' ',
                                            label2: '£' + item.price,
                    value: item.product_id,
                }
            }));

        }
    });
}, 
select: function(event, ui) {
    url = 'index.php?route=product/product&product_id=' + ui.item.value;
    location = url;
    return false;
},
focus: function(event, ui) {
  return false;
   }
   }

   );;
        $["ui"]["autocomplete"].prototype["_renderItem"] = function( ul, item) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( $( "<a></a>" ).html( item.label + '<span style="color:#CC3333">' + item.label2 + '</span>' ) )
            .appendTo( ul );
        };

我希望有同样问题的人会觉得这很有用。另外，这里是@Omar为我提供并使用它的链接，我找到了我的解决方案： -

jQuery UI - Autocomplete - Custom style?

在jQuery中添加span标记

1 个答案: