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;
 }
 }
 );

これらは、私がスタイリングしたい2つの要素です

 '£', item.price

上記の 2 つの要素/パーツのみをスタイルしたい。この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 に答える