Javascript input с автозаполнением

Как создать автозаполнение на JS

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

Шаг 2. Создание массива данных

Для реализации автозаполнения нам понадобится массив данных. В этом примере мы будем использовать массив строк.

var data = ['Пункт 1', 'Пункт 2', 'Пункт 3', 'Пункт 4', 'Пункт 5'];

Шаг 3. Создание функции автозаполнения

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

function autocomplete(input, data) < var currentInput = ''; input.addEventListener('input', function(e) < var container, item, i; currentInput = this.value; closeAllLists(); if (!currentInput) < return false;>container = document.createElement('DIV'); container.setAttribute('id', this.id + 'autocomplete-list'); container.setAttribute('class', 'autocomplete-items'); this.parentNode.appendChild(container); for (i = 0; i < data.length; i++) < if (data[i].substr(0, currentInput.length).toUpperCase() == currentInput.toUpperCase()) < item = document.createElement('DIV'); item.innerHTML = '' + data[i].substr(0, currentInput.length) + ''; item.innerHTML += data[i].substr(currentInput.length); item.innerHTML += ''; item.addEventListener('click', function(e) < input.value = this.getElementsByTagName('input')[0].value; closeAllLists(); >); container.appendChild(item); > > >); function closeAllLists(elmnt) < var x = document.getElementsByClassName('autocomplete-items'); for (var i = 0; i < x.length; i++) < if (elmnt != x[i] && elmnt != input) < x[i].parentNode.removeChild(x[i]); >> > document.addEventListener('click', function (e) < closeAllLists(e.target); >); >

Шаг 4. Инициализация функции автозаполнения

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

autocomplete(document.getElementById('autoInput'), data);

Заключение

В этом руководстве мы создали простой механизм автозаполнения, используя только HTML и JavaScript. Этот пример можно легко адаптировать для работы с любыми данными, и он может быть отличной отправной точкой для создания более сложных систем автозаполнения.

• Получить ссылку
• Facebook
• Twitter
• Pinterest
• Электронная почта
• Другие приложения

Комментарии

Отправить комментарий

Популярные сообщения

Python вывести количество элементов списка

Python: Вывод количества элементов списка В этой статье мы рассмотрим как выводить количество элементов списка с помощью языка программирования Python. Использование функции len() Для определения количества элементов в списке в Python, используйте встроенную функцию len() . my_list = [1, 2, 3, 4, 5] elements_count = len(my_list) print(«Количество элементов в списке:», elements_count) Этот код создает список my_list , а затем использует функцию len() для подсчета элементов в списке. Результат будет выведен на экран. Использование цикла for Если вы хотите подсчитать количество элементов списка без использования функции len() , вы можете использовать цикл for . my_list = [1, 2, 3, 4, 5] elements_count = 0 for _ in my_list: elements_count += 1 print(«Количество элементов в списке:», elements_count) В этом примере мы инициализируем переменную elements_count значением 0, а затем для каждого элемента в списке увел

Как сделать шашки на python

Как сделать шашки на Python Как сделать шашки на Python В этой статье мы рассмотрим, как создать простую игру в шашки на Python с использованием библиотеки Pygame. Подготовка Для начала установите библиотеку Pygame, используя следующую команду: pip install pygame Создание доски import pygame pygame.init() WIDTH, HEIGHT = 800, 800 ROWS, COLS = 8, 8 SQUARE_SIZE = WIDTH // COLS WHITE = (255, 255, 255) BLACK = (0, 0, 0) RED = (255, 0, 0) BLUE = (0, 0, 255) def draw_board(win): win.fill(WHITE) for row in range(ROWS): for col in range(row % 2, COLS, 2): pygame.draw.rect(win, BLACK, (row * SQUARE_SIZE, col * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE)) def main(): win = pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption(«Checkers») clock = pygame.time.Clock() run = True while run: clock.tick(60) for event in pygame.event.get(): if event.ty

Python как перевести число в другую систему счисления

Преобразуйте числа как профессионал! Узнайте, как Python может перевести любое число в любую систему счисления. Даже если вы никогда раньше не сталкивались с программированием, эта статья поможет вам стать экспертом в считывании двоичных, восьмеричных и шестнадцатеричных чисел. Не пропустите возможность раскрыть секреты произвольной системы счисления в Python! Python: Перевод числа в другую систему счисления В языке программирования Python преобразование числа в другую систему счисления может быть выполнено с использованием встроенных функций и методов. Преобразование чисел в двоичную систему Python предоставляет встроенную функцию bin() для преобразования числа в двоичную систему. # Пример преобразования числа в двоичную систему num = 18 binary_num = bin(num) print(binary_num) # Вывод: 0b10010 Преобразование чисел в восьмеричную систему Функция oct() в Python преобразует число в восьмеричную систему. # Пример преобразования числа в восьмеричную систему num = 18

Источник

How TO — Autocomplete

var countries = [«Afghanistan»,»Albania»,»Algeria»,»Andorra»,»Angola»,»Anguilla»,»Antigua & Barbuda»,»Argentina»,»Armenia»,»Aruba»,»Australia»,»Austria»,»Azerbaijan»,»Bahamas»,»Bahrain»,»Bangladesh»,»Barbados»,»Belarus»,»Belgium»,»Belize»,»Benin»,»Bermuda»,»Bhutan»,»Bolivia»,»Bosnia & Herzegovina»,»Botswana»,»Brazil»,»British Virgin Islands»,»Brunei»,»Bulgaria»,»Burkina Faso»,»Burundi»,»Cambodia»,»Cameroon»,»Canada»,»Cape Verde»,»Cayman Islands»,»Central Arfrican Republic»,»Chad»,»Chile»,»China»,»Colombia»,»Congo»,»Cook Islands»,»Costa Rica»,»Cote D Ivoire»,»Croatia»,»Cuba»,»Curacao»,»Cyprus»,»Czech Republic»,»Denmark»,»Djibouti»,»Dominica»,»Dominican Republic»,»Ecuador»,»Egypt»,»El Salvador»,»Equatorial Guinea»,»Eritrea»,»Estonia»,»Ethiopia»,»Falkland Islands»,»Faroe Islands»,»Fiji»,»Finland»,»France»,»French Polynesia»,»French West Indies»,»Gabon»,»Gambia»,»Georgia»,»Germany»,»Ghana»,»Gibraltar»,»Greece»,»Greenland»,»Grenada»,»Guam»,»Guatemala»,»Guernsey»,»Guinea»,»Guinea Bissau»,»Guyana»,»Haiti»,»Honduras»,»Hong Kong»,»Hungary»,»Iceland»,»India»,»Indonesia»,»Iran»,»Iraq»,»Ireland»,»Isle of Man»,»Israel»,»Italy»,»Jamaica»,»Japan»,»Jersey»,»Jordan»,»Kazakhstan»,»Kenya»,»Kiribati»,»Kosovo»,»Kuwait»,»Kyrgyzstan»,»Laos»,»Latvia»,»Lebanon»,»Lesotho»,»Liberia»,»Libya»,»Liechtenstein»,»Lithuania»,»Luxembourg»,»Macau»,»Macedonia»,»Madagascar»,»Malawi»,»Malaysia»,»Maldives»,»Mali»,»Malta»,»Marshall Islands»,»Mauritania»,»Mauritius»,»Mexico»,»Micronesia»,»Moldova»,»Monaco»,»Mongolia»,»Montenegro»,»Montserrat»,»Morocco»,»Mozambique»,»Myanmar»,»Namibia»,»Nauro»,»Nepal»,»Netherlands»,»Netherlands Antilles»,»New Caledonia»,»New Zealand»,»Nicaragua»,»Niger»,»Nigeria»,»North Korea»,»Norway»,»Oman»,»Pakistan»,»Palau»,»Palestine»,»Panama»,»Papua New Guinea»,»Paraguay»,»Peru»,»Philippines»,»Poland»,»Portugal»,»Puerto Rico»,»Qatar»,»Reunion»,»Romania»,»Russia»,»Rwanda»,»Saint Pierre & Miquelon»,»Samoa»,»San Marino»,»Sao Tome and Principe»,»Saudi Arabia»,»Senegal»,»Serbia»,»Seychelles»,»Sierra Leone»,»Singapore»,»Slovakia»,»Slovenia»,»Solomon Islands»,»Somalia»,»South Africa»,»South Korea»,»South Sudan»,»Spain»,»Sri Lanka»,»St Kitts & Nevis»,»St Lucia»,»St Vincent»,»Sudan»,»Suriname»,»Swaziland»,»Sweden»,»Switzerland»,»Syria»,»Taiwan»,»Tajikistan»,»Tanzania»,»Thailand»,»Timor L’Este»,»Togo»,»Tonga»,»Trinidad & Tobago»,»Tunisia»,»Turkey»,»Turkmenistan»,»Turks & Caicos»,»Tuvalu»,»Uganda»,»Ukraine»,»United Arab Emirates»,»United Kingdom»,»United States of America»,»Uruguay»,»Uzbekistan»,»Vanuatu»,»Vatican City»,»Venezuela»,»Vietnam»,»Virgin Islands (US)»,»Yemen»,»Zambia»,»Zimbabwe»];

Step 3) Add CSS:

The container must have a «relative» positioning.

Example

* < box-sizing: border-box; >
body font: 16px Arial;
>
.autocomplete /*the container must be positioned relative:*/
position: relative;
display: inline-block;
>
input border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
>
input[type=text] background-color: #f1f1f1;
width: 100%;
>
input[type=submit] background-color: DodgerBlue;
color: #fff;
>
.autocomplete-items position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
>
.autocomplete-items div padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
>
.autocomplete-items div:hover /*when hovering an item:*/
background-color: #e9e9e9;
>
.autocomplete-active /*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
>

Step 4) Add JavaScript:

Example

function autocomplete(inp, arr) <
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener(«input», function(e) <
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) < return false;>
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement(«DIV»);
a.setAttribute(«id», this.id + «autocomplete-list»);
a.setAttribute(«class», «autocomplete-items»);
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array. */
for (i = 0; i < arr.length; i++) <
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) <
/*create a DIV element for each matching element:*/
b = document.createElement(«DIV»);
/*make the matching letters bold:*/
b.innerHTML = «» + arr[i].substr(0, val.length) + ««;
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item’s value:*/
b.innerHTML += «»;
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener(«click», function(e) <
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName(«input»)[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
>);
a.appendChild(b);
>
>
>);
/*execute a function presses a key on the keyboard:*/
inp.addEventListener(«keydown», function(e) <
var x = document.getElementById(this.id + «autocomplete-list»);
if (x) x = x.getElementsByTagName(«div»);
if (e.keyCode == 40) <
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
> else if (e.keyCode == 38) < //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus—;
/*and and make the current item more visible:*/
addActive(x);
> else if (e.keyCode == 13) <
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) <
/*and simulate a click on the «active» item:*/
if (x) x[currentFocus].click();
>
>
>);
function addActive(x) <
/*a function to classify an item as «active»:*/
if (!x) return false;
/*start by removing the «active» class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class «autocomplete-active»:*/
x[currentFocus].classList.add(«autocomplete-active»);
>
function removeActive(x) <
/*a function to remove the «active» class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) <
x[i].classList.remove(«autocomplete-active»);
>
>
function closeAllLists(elmnt) <
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName(«autocomplete-items»);
for (var i = 0; i < x.length; i++) <
if (elmnt != x[i] && elmnt != inp) <
x[i].parentNode.removeChild(x[i]);
>
>
>
/*execute a function when someone clicks in the document:*/
document.addEventListener(«click», function (e) <
closeAllLists(e.target);
>);
>

Step 5) Initiate the Autocomplete Effect on «myInput»:

Example

Pass the countries array as the second parameter of the autocomplete function:

Источник