0

我想只设计特定元素/部分的样式

我的代码：-

$('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**

如果您需要更多详细信息，请告诉我。

4

1 回答 1

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 - 自动完成 - 自定义样式？

于 2013-07-15T13:15:46.710 回答