Обновил автокомплит

С помощью Andrea Riciputi добрался поправить пару минорных багов в автокомплите, заодно с его пинка, точнее на основе его патча дописал новый функционал который позволяет кастомизировать селект под автокоплит. В общем смотрите сами:

Вот такая прелесть получается из вот такой простой разметки и одной строчки кода


<select name="myselect" id="myselect">
<option value='Somateria mollissima'>Common Eider</option>
<option value='Crex crex'>Corncrake</option>
<option value='Grus grus'>Common Crane</option>
<option value='Charadrius hiaticula'>Common Ringed Plover</option>
<option value='Gallinago gallinago'>Common Snipe</option>
<option value='Tringa totanus'>Common Redshank</option>
<option value='Sterna hirundo'>Common Tern</option>
<option value='Alcedo atthis'>Common Kingfisher</option>
<option value='Galerida cristata'>Crested Lark</option>
<option value='Corvus corax'>Common Raven</option>
<option value='Emberiza calandra'>Corn Bunting</option>
<option value='Tadorna tadorna'>Common Shelduck</option>
<option value='Bucephala clangula'>Common Goldeneye</option>
<option value='Buteo buteo'>Common Buzzard</option>
<option value='Phoenicurus phoenicurus'>Common Redstart</option>
<option value='Apus apus'>Common Swift</option>
<option value='Sylvia communis'>Common Whitethroat</option>
<option value='Tringa nebularia'>Common Greenshank</option>
<option value='Columba palumbus'>Common Wood Pigeon</option>
<option value='Delichon urbicum'>Common House Martin</option>
<option value='Carduelis cannabina'>Common Linnet</option>
<option value='Cuculus canorus'>Common Cuckoo</option>
<option value='Lophophanes cristatus'>Crested Tit</option>
<option value='Turdus merula'>Common Blackbird</option>
<option value='Actitis hypoleucos'>Common Sandpiper</option>
<option value='Emberiza schoeniclus'>Common Reed Bunting</option>
<option value='Sturnus vulgaris'>Common Starling</option>
<option value='Aythya ferina'>Common Pochard</option>
<option value='Phylloscopus collybita'>Common Chiffchaff</option>
<option value='Falco tinnunculus'>Common Kestrel</option>
<option value='Fringilla coelebs'>Common Chaffinch</option>
<option value='Gallinula chloropus'>Common Moorhen</option>
<option value='Anas crecca'>Common Teal</option>
<option value='Corvus corone'>Carrion Crow</option>
<option value='Periparus ater'>Coal Tit</option>
<option value='Cettia cetti'>Cetti's Warbler</option>
<option value='Motacilla citreola'>Citrine Wagtail</option>
<option value='Calidris ferruginea'>Curlew Sandpiper</option>
<option value='Loxia curvirostra'>Common Crossbill</option>
<option value='Coturnix coturnix'>Common Quail</option>
<option value='Luscinia megarhynchos'>Common Nightingale</option>
<option value='Hydroprogne caspia'>Caspian Tern</option>
<option value='Carpodacus erythrinus'>Common Rosefinch</option>
<option value='Locustella naevia'>Common Grasshopper Warbler</option>
<option value='Melanitta nigra'>Common Scoter</option>
<option value='Bubulcus ibis'>Cattle Egret</option>
<option value='Aythya valisineria'>Canvasback</option>
<option value='Calonectris borealis'>Cory`s Shearwater</option>
<option value='Dromas ardeola'>Crab-Plover</option>
<option value='Cursorius cursor'>Cream-coloured Courser</option>
<option value='Glareola pratincola'>Collared Pratincole</option>
<option value='Charadrius asiaticus'>Caspian Plover</option>
<option value='Larus cachinnans'>Caspian Gull</option>
<option value='Aethia cristatella'>Crested Auklet</option>
<option value='Chaetura pelagica'>Chimney Swift</option>
<option value='Saxicola maura variegata'>Caspian Stonechat</option>
<option value='Acrocephalus fuscus'>Caspian Reed Warbler</option>
<option value='Emberiza cirlus'>Cirl Bunting</option>
<option value='Melanocorypha calandra'>Calandra Lark</option>
<option value='Ficedula albicollis'>Collared Flycatcher</option>
<option value='Emberiza caesia'>Cretzschmar`s Bunting</option>
<option value='Emberiza rutila'>Chestnut Bunting</option>
<option value='Pyrrhocorax pyrrhocorax'>Chough</option>
<option value='Alectoris chukar'>Chukar</option>
</select>

$("select#myselect").autocomplete();

По умолчанию используются вот такие опции:


{
    source: this,
    values: true,
    fillin: true,
    writable : false,
    onSelect: function() {
        select.val(this.pairs[this.ac.val()]);
    }
}

28 Комментарии “Обновил автокомплит

  1. кульно
    но я предпочитаю списки, в которые можно добавить свой вариант

  2. у всех браузерах не работает выбор по ентеру, в ie вообще ужас какойто … а раньше работало гут )

  3. Спасибо за фидбек.

    >>выбор по ентеру
    это легко чинится :) забыл просто break убрать после тестирования.

    >>>в ie вообще ужас какойто
    подробнее плз, что именно не пашет?

  4. хм в IE8 уже отображает нормально… правда тягать список за скролинг можно только в FF а ie,opera,chrome сразу прячут его (

  5. может у тебя стили не догрузились?

    со скроллингом проблема известна, и мне казалось я это сначала сделал а потом где-то потерял по дороге. сейчас подниму самую первую версию и гляну.

  6. да точно потерял этот кусок во время рефакторинга. вечером все поправлю.

  7. Набираю буквы «c», «h», потом «o» и на «o» не реагирует… «Chough» выбирает только после набора «chou». Пачиму?

  8. неправильно реагирует на сиволы «eyo[1!-» есть подозрения что неправильно отрабатывает регулярка

  9. проблема с «chou» осталась кроме того не ищет во втором слове вобще

  10. ctrl+R не помог ищет только с начала первого слова или это както можно настроить?

  11. стоп. плагин всегда искал с начала первого слова, и никогда не было и не будет другого. а баг с «chou» пропал.

  12. Ну если все же надо искать не с начала первого слова, а внутри него, то тогда можно чуть подпатчить :-)
    search.php:

    
    -if (strpos(strtolower($key), $mask) === 0) {
    
    +if (strpos(strtolower($key), $mask)) {
    

    jquery.autocomplete.js:

    
    - return new RegExp('^' + mask, 'ig').test(text) ?
    - '<div>' + text.replace(new RegExp('^' + mask, 'ig'), function(mask) { 
    
    + return new RegExp(mask, 'ig').test(text) ?
    + '<div>' + text.replace(new RegExp(mask, 'ig'), function(mask) { 
    
  13. code.restorer, я немного поправил ;)

    спасибо но я не собираюсь вносить такую правку в плагин. я просто не вижу смысла.

  14. А можно как-нибудь ширину не задавать, а использовать все что дано? Те типа width 100%

  15. И еще пара вопросов
    — Что-то у меня предзаполнение не происходит.
    — Как получить отсутствующее в селекте значение? Точнее как определить что пользователь ввел что-то новое и выполнить скажем ajax запрос для сохранения?

  16. нет нельзя тогда кнопка со стрелкой не влезет
    Поподробнее объясни что нужно

  17. @CTAPbIu_MABP У меня табличка резиновая и вешать туда фиксированую ширину не комильфо. Куда-то надо воткнуть $(div).width()-22 тока не могу понять куда.
    Оба вопроса относились к первому каменту? А про второй не скажешь?

  18. @nevian
    Куда приляпать вроде понял, но похоже к контейнеру придется еще лепить имя и потом на него ссылаться при установке атрибутов инпута

  19. $(div).width()-22
    как ты собираешься отнять 22 от 100%

    нет второй вопрос относился ко второму каменту.
    Я понятия не имею как ты сконфигурировал плагин и не могу сказать почему у тебя нет предзаполнения
    Автокомплит это инструмент для помощи пользователю, а не для фильтрации данных. В результате ты получаешь слово которое написал пользователь а не id этого слова в базе. Если тебе нужно узнать его id то при сохранении сделай дополнительную выборку по этому слову, или используй пример №9

  20. @CTAPbIu_MABP
    Я ни разу не спец в jQ и думал что это конструкция возвращает реальную ширину, по крайней мере в примерах так..

    Все по умолчанию, как на этой странице, но у тебя селект сразу открывается, а меня если начать набирать..

    Тут некоторое непонимание(вероятно с моей стороны) — для меня это быстрый способ перемещения по списку с возможностью его редактирования.
    Мне надо сохранить то новое, что пользователь ввел, но при этом чтобы он имел возможность выбрать и уже существующее, а я в свою очередь получить id существующего. Не совсем мне подходит пример №9 — новое я получить не могу. Хотелось бы или число получить(считаем это id) или текст (новое для сохранения).

  21. создай hidden input и по примеру 9 засовывай туда значение из option value. Если параметр из этого инпута пришел значит слово было в списке если нет надо его добавить. С этим трудностей нет?

Комментарии закрыты