2016-08-24 7 views
3

У меня есть простой вход, как этотJQuery автозаполнения: не может применить стиль на сфокусированного пункта

<input id="name-srch" type="text" data-type="string">

И мой JS (упрощенный)

$('#name-srch').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: ..., 
      data: ..., 
      success: function (data) { 
       // note that 'data' is the list of elements to display 
       response(data) 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     // do some stuff 
     return false 
    }, 
    focus: function (event, ui) { 
     console.log(ui.item.Name) // just to see if the focus event is triggered, and it is 
     return false 
    } 
}) 
.autocomplete("instance")._renderItem = function (ul, item) { 
    return $("<li>") 
     .append("<a>" + item.Name + "</a>") 
     .appendTo(ul); 
}; 

JQuery автозаполнения заполнить <ul> с <li>s, как и должно, и запускает событие фокусировки при наведении курсора мыши или вниз/вверх, как следует.

Проблема заключается в том, что я хочу, чтобы применить определенный стиль сфокусированного элемента, так что в моем CSS У меня есть что-то вроде этого

.ui-state-focus { 
    background-color: red; 
    font-weight: bold; 
} 

Там моя проблема, сфокусированный пункт никогда не принимает ui-state-focus класса и поэтому он никогда не принимает определенный стиль.

Что я делаю не так :(

EDIT: я уже пытался добавить в моем CSS что-то вроде

.ui-menu-item:hover { 
    background-color: red; 
    font-weight: bold; 
} 

Действительно это делает трюк для висения, но не для фокус с помощью клавиши со стрелками вверх/вниз. Более того, мне это не очень нравится, я бы предпочел, чтобы он работал так, как это было бы, если бы я мог ...

ответ

3

Мне удалось заставить его работать.

почему JQuery автозаполнения не применяет ui-state-focus на сфокусированного <li> но применить ui-state-active класс на <a>внутри сфокусированный <li>. Поэтому я могу применить разыскиваемого стиль через

.ui-state-active { 
    background-color: red; 
    font-weight: bold; 
} 

Я до сих пор понятия не имею, почему он применяет класс только на <a> внутри, а не на <li>, как описано на всех документаций, но эй, это работает ...

0

Возможно, другим способом для этого является добавление класс для li в javascript, затем добавьте некоторые вещь, как этот

.li-hover:hover { 
    background-color: red; 
    font-weight: bold; 
} 

может сделать трюк, как предположение, я думаю, потому что вы устанавливаете различные визуализации JQuery автозаполнения не делает парение для вас.

5

попробовать этот селектор:

.ui-menu .ui-menu-item:hover, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { 
    background-color: red; 
    font-weight: bold; 
} 

Там является JSFIDDLE от другого вопроса, который я ответил. Просто проверьте последнюю строку в определении CSS:

https://jsfiddle.net/g4bvs0we/5/

Update: Я обновил исходный код и jsfiddle ссылку. Я предполагаю, что есть проблема с приоритетом правила CSS, и использование более конкретного правила должно помочь.

Не могли бы вы сообщить мне, если это работает?

+0

Да, я думал об этом и попытался это уже (должны упомянуть, что может быть). Действительно, он работает для зависания, но не для фокуса с помощью клавиши со стрелкой вниз/вверх:/Нет ли способа заставить его работать так, как оно предназначено? –

+0

Привет, вы можете проверить обновленную версию? – Vahan

+0

Такая же проблема, как и раньше, делает трюк при наведении (из-за '.ui-menu-item: hover'), но стиль не применяется в случае фокуса с помощью клавиши« вниз »/« вверх ». Я думаю, что проблема может быть не в моем CSS. Как-то кажется, что JQuery Autocomplete не выполняет свою работу с использованием правильных классов (в моем случае 'ui-state-focus'), если мне удастся заставить его работать правильно, я сохранен. Моя версия JQuery UI - это 1.12.0, кстати –

0

Я исправил это с помощью:

.ui-autocomplete { 
    .ui-state-focus { 
     border: 0px !important; 
     background: #yourcolour !important; 
     color: #yourcolour !important; 
    } 
}