|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
27.12.2017, 19:06 | #1 |
Новичок
Джуниор
Регистрация: 27.12.2017
Сообщений: 2
|
Нужна помощь с массивами в jquery
Всем привет! Помогите, пожалуйста, разобраться как в этом примере вместо переменных добавить массив. Например:
Код:
то в списке появляются штаты, но автозаполнить импут не получается. Спасибо! Код HTML:
<!DOCTYPE html> <html> <title>changetime</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { var alreadyFilled = false; var states = ['Alabama','Alaska','American Samoa','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Federated States of Micronesia','Florida','Georgia','Guam','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Marshall Islands','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Northern Mariana Islands','Ohio','Oklahoma','Oregon','Palau','Pennsylvania','Puerto Rico','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virgin Island','Virginia','Washington','West Virginia','Wisconsin','Wyoming']; function initDialog() { clearDialog(); for (var i = 0; i < states.length; i++) { $('.dialog').append('<div>' + states[i] + '</div>'); } } function clearDialog() { $('.dialog').empty(); } $('.autocomplete input').click(function() { if (!alreadyFilled) { $('.dialog').addClass('open'); } }); $('body').on('click', '.dialog > div', function() { $('.autocomplete input').val($(this).text()).focus(); $('.autocomplete .close').addClass('visible'); alreadyFilled = true; }); $('.autocomplete .close').click(function() { alreadyFilled = false; $('.dialog').addClass('open'); $('.autocomplete input').val('').focus(); $(this).removeClass('visible'); }); function match(str) { str = str.toLowerCase(); clearDialog(); for (var i = 0; i < states.length; i++) { if (states[i].toLowerCase().startsWith(str)) { $('.dialog').append('<div>' + states[i] + '</div>'); } } } $('.autocomplete input').on('input', function() { $('.dialog').addClass('open'); alreadyFilled = false; match($(this).val()); }); $('body').click(function(e) { if (!$(e.target).is("input, .close")) { $('.dialog').removeClass('open'); } }); initDialog(); }); </script> <style> body { background:#f5f5f5; } * { font-family: 'helvetica neue'; box-sizing: border-box; } .autocomplete { background:#fff; position:relative; width:400px; box-shadow:0 0 2px rgba (0,0,0,0.12), 0 2px 2px rgba (0,0,0,0.24); } .autocomplete .close { position:absolute; font-size:13px; z-index:10; top:10px; left:calc(100% - 50px); color:#aaa; cursor:pointer; display:none; } .autocomplete .close.visible { display:block; } input { padding:10px 10px; font-weight:300; width:100%; border:none; outline:none; font-size:14px; color:#666; } .dialog { width:100%; display:none; min-height:40px; max-height:330px; overflow:scroll; border-top:1px solid #f4f4f4; } .dialog.open { display:block; } .dialog div { padding:20px 10px; font-size:13px; cursor:pointer; transition:all 0.2s; } .dialog div:hover { background: #f2f2f2; } </style> <body> <div class="autocomplete"> <input type="text" placeholder="What is your favorite US state?"> <span class="close">Cancel</span> <div class="dialog"></div> </div> </body> </html> Код программы нужно выделять (форматировать) тегами [CODE] (читать FAQ) Модератор Последний раз редактировалось Serge_Bliznykov; 28.12.2017 в 10:02. |
28.12.2017, 15:27 | #2 |
Старожил
Регистрация: 09.01.2008
Сообщений: 26,229
|
ну так надо поменять в двух процедурах:
в function initDialog и в function match(str) Код:
кстати, есть баг в вашем autocomplete - если задать фильтр, выбрать элемент, то потом, после нажатия на Cancel фильтр не сбрасывается. p.s. я бы полечил этот баг так: Код:
Последний раз редактировалось Serge_Bliznykov; 28.12.2017 в 15:36. |
28.12.2017, 16:10 | #3 |
Новичок
Джуниор
Регистрация: 27.12.2017
Сообщений: 2
|
|
28.12.2017, 16:20 | #4 |
Старожил
Регистрация: 09.01.2008
Сообщений: 26,229
|
Артём, всегда пожалуйста!
Спасибо. с Наступающим НГ! |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Нужна помощь с массивами в C# | Komi | Помощь студентам | 3 | 24.11.2016 21:28 |
Нужна помощь с одним скриптом на JQuery... | artiom4356 | JavaScript, Ajax | 3 | 25.03.2015 23:39 |
Нужна помощь с массивами!! с++ | jinos | Помощь студентам | 4 | 12.11.2014 19:09 |
Нужна помощь по jQuery | VIP2020 | JavaScript, Ajax | 4 | 15.04.2014 15:58 |
Нужна помощь по jQuery | VIP2020 | JavaScript, Ajax | 1 | 31.03.2014 23:51 |