Изменение результата автозаполнения Jquery пользовательского интерфейса, содержащего заданную строку c - PullRequest
1 голос
/ 13 января 2020

Здесь очень похожий вопрос: jquery автозавершение смены цвета

По сути, это то, что я хочу сделать, но я хочу изменить css, если один из Результаты поиска содержат слово "Entry".

Эта функция, которую я вызываю с помощью jquery пользовательского сценария:

$(function() {
    $(".wholesale_product_id").autocomplete({
        source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
        minLength: 1
    });
});

Эта функция работает и создаст список, подобный этому ( обратите внимание, что я скопировал html из инструментов разработчика и просто скопировал его часть для демонстрационных целей):

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; width: 1110px; top: 322px; left: 469px;">
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-2" class="ui-corner-all" tabindex="-1">[*2042*] - Fanta Orange cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-3" class="ui-corner-all" tabindex="-1">[*116*] - Fanta Strawberry cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-4" class="ui-corner-all" tabindex="-1">[*4381*] - Fanta Berry cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-44" class="ui-corner-all" tabindex="-1">Entry ID - [*2115*] - Fanta Strawberry cans 355ml x 24 (no full stop)</a>
    </li>
</ul>

Изображение результатов в браузере:

Результаты поиска

Чего я хочу достичь:

Я хочу, чтобы любой результат поиска или тег, содержащий "Entry ID" или "Entry", был красного цвета текст и желательно в верхней части списка.

Я пробовал:

Просто чтобы посмотреть, смогу ли я изменить цвет для всех результатов поиска, используя следующий код, но даже это не работает, и это без пытаюсь найти строку Entry.

$( "a.ui-menu-item").css( "color", "#e74c3c");

Любой совет был бы великолепен.

* РЕДАКТИРОВАТЬ *

Немного больше информации, результаты, которые начинаются с идентификатора записи, являются пользовательскими результатами, которые мы сохранили, которые получены из другой таблицы базы данных, и мы хотим они должны быть вверху списка результатов поиска с красным шрифтом.

1 Ответ

2 голосов
/ 13 января 2020

Вы полностью контролируете, как AutoComplete отображает свой список с помощью _renderItem Если вы хотите сделать это на стороне сервера , просто верните список Json со свойством IsRedClass и именем

$(".wholesale_product_id").autocomplete({
    source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
    minLength: 1
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append('<a class="' + item.IsRedClass + '">' + item.Name + '</a>')
      .appendTo(ul);
};

Или на стороне клиента:

$(".wholesale_product_id").autocomplete({
    source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
    minLength: 1
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append('<a class="' + item.Name.includes("Entry") ? "red" : "" + '">' + item.Name + '</a>')
      .appendTo(ul);
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...