Аутоматско довршавање помоћу јКуери корисничког интерфејса

На Интернету постоји много додатака који нам омогућују додавање ове функционалности на нашу веб локацију, међутим они су развијени према програмској схеми за коју можда не знамо, а онда су њихове измјене и имплементација обично помало досадни и комплицирани. Али од тада није све изгубљено јКуери и његово проширење библиотека Корисничко сучеље јКуери доносе нам неке методе за имплементацију функције аутоматског довршавања на нашој веб страници без велике главобоље.
Пре него што прођемо кроз пример, да видимо метод аутоматског довршавања и како функционише.
Метода аутоцомплете ()
Метода аутоцомплете може се користити на два начина:

$ (селектор, контекст) .аутокомплетно (опције) $ (селектор, контекст) .аутокомплетно ("акција", параметри)

Ова метода изјављује да ХТМЛ -ом мора да се управља као поље које приказује листу предлога, а опције одређују понашање ове листе у тренутку када корисник почне да куца у поље.
Од знакова унетих у текстуално поље, врши се поређење са вредностима садржаним у изворним опцијама.
Погледајмо практичан пример да бисмо то боље сагледали:
1- Прво укључујемо потребне датотеке:

2- Креирамо променљиву која садржи речи које ће бити листа предлога доступних за аутоматско довршавање, а листа предлога се такође може преузети из ЈСОН па чак и од а КСМЛ, чак и мало проширујући функционалност додавањем ајака, али у овом примеру ћемо користити променљиву како не бисмо компликовали ствари:

вар аваилаблеТагс = ["АцтионСцрипт", "АпплеСцрипт", "Асп", "БАСИЦ", "Ц", "Ц ++", "Цлојуре", "ЦОБОЛ", "ЦолдФусион", "Ерланг", "Фортран", „Гроови“, „Хаскелл“, „Јава“, „Јавасцрипт“, „Лисп“, „Перл“, „ПХП“, „Питхон“, „Руби“, „Сцала“, „Сцхеме“];

3- Позивамо метод, повезујемо селектор са њим и дајемо му параметар као опцију извор Говорећи вам одакле можете добити листу предлога:

 $ ("#тагс") .аутоцомплете ({извор: аваилаблеТагс}); 

4- За крај у нашем ХТМЛ -у креирамокоји ће садржати наш унос који ће бити тај који примењује аутоматско довршавање:

Ознаке:

Након имплементације то би требало бити отприлике овако:

На крају, оставићу вам комплетан код како бисте га сами тестирали, а да не заборавите да можемо попунити нашу листу предлога из различитих валидних извора и применити различите опције и догађаје који ће повећати функционалност наше компоненте.

 јКуери УИ Аутоматско довршавање - Подразумевана функционалностОзнаке:

Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен