Прављење сопствене траке за претрагу за аутоматско довршавање је лакше него што мислите.
Трака за претрагу је популаран елемент корисничког интерфејса који користе многе модерне веб странице. Ако правите сајт који садржи било коју врсту података, можда ћете желети да ваши корисници могу да претражују одређене ставке.
Постоји много начина на које можете да направите траку за претрагу. Можете креирати сложене траке за претрагу које враћају резултате на основу више филтера, као што су име или датум. Постојеће библиотеке вам могу помоћи да имплементирате траку за претрагу без да је правите од нуле.
Међутим, такође можете да креирате једноставну траку за претрагу користећи ванили ЈаваСцрипт, који упоређује унос корисника са листом стрингова.
Како додати кориснички интерфејс за траку за претрагу
Ваша веб локација треба да садржи оквир за унос у који корисници могу да унесу текст који желе да траже. Један од начина да то урадите је да користите ознаку за унос и стилизујете је тако да изгледа као трака за претрагу.
- Направите фасциклу за чување ваше веб локације. Унутар фасцикле направите ХТМЛ датотеку под називом индек.хтмл.
- Попуните своју датотеку основном структуром ХТМЛ документа. Ако нисте упознати са ХТМЛ-ом, има их много Примери ХТМЛ кода које можете научити да вам помогнем да се убрзате.
<!доцтипе хтмл>
<хтмл ланг="ен-УС">
<глава>
<наслов>Трака за претрагу</title>
</head>
<тело>
<див цласс="контејнер">
<!-- Садржај веб странице иде овде-->
</div>
</body>
</html> - Унутар див класе контејнера додајте ознаку за унос. Ово ће омогућити кориснику да унесе текст који жели да тражи. Кад год унесу нови знак, ваша веб локација ће позвати функцију сеарцх(). Ову функцију ћете креирати у каснијим корацима.
Атрибут аутоцомплете осигурава да прегледач неће додати сопствени падајући мени на основу претходних термина за претрагу.<див цласс="контејнер">
<х2>Тражите земље</h2>
<инпут ид="трака за претрагу" аутоцомплете="ван" онкеиуп="Претрага()" типе="текст"
наме="Претрага" плацехолдер="Шта тражите?">
</div> - У истом фолдеру као и ваш индек.хтмл датотеку, креирајте нову ЦСС датотеку под називом стилес.цсс.
- Попуните датотеку стилом за целокупну веб страницу и траку за претрагу:
тело {
маргина: 0;
паддинг: 0;
боја позадине: #ф7ф7ф7;
}
* {
породица фонтова: "Ариал", Санс Сериф;
}
.контејнер {
паддинг: 100пк 25%;
дисплеј: флек;
флек-дирецтион: колона;
лине-хеигхт: 2рем;
фонт-сизе: 1.2ем;
боја: #202Ц39;
}
#сеарцхбар {
паддинг: 15пк;
бордер-радиус: 5пк;
}
улазни[типе=тект] {
-вебкит-транситион: ширина 0.15слакоћа уласка;
прелаз: ширина 0.15слакоћа уласка;
} - У индек.хтмл, додајте везу до ваше ЦСС датотеке унутар ознаке хеад и испод ознаке титле:
<линк рел="стилесхеет" хреф="стилес.цсс"> - Отвори индек.хтмл датотеку у веб претраживачу и погледајте кориснички интерфејс своје траке за претрагу.
Како да креирате низове листе за траку за претрагу
Пре него што корисник буде могао да тражи, мораћете да направите листу доступних ставки које може да тражи. То можете учинити низом низова. Жица је једна од многих типови података које можете да користите у ЈаваСцрипт-у, и може представљати низ знакова.
Можете динамички креирати ову листу користећи ЈаваСцрипт, док се страница учитава.
- У индек.хтмл, испод ознаке за унос, додајте див. Овај див ће приказати падајући мени који ће садржати листу ставки које одговарају ономе што корисник тражи:
<див ид="листа"></div> - У истом фолдеру као и ваш индек.хтмл фајл и стилес.цсс датотеку, креирајте нову датотеку под називом сцрипт.јс.
- У сцрипт.јс, креирајте нову функцију под називом лоадСеарцхДата(). Унутар функције иницијализујте низ са листом стрингова. Имајте на уму да је ово мала статична листа. Сложенија имплементација ће морати да узме у обзир претрагу кроз веће скупове података.
функцијалоадСеарцхДата() {
// Подаци који се користе у траци за претрагу
дозволити земље = [
'Аустралија',
'Аустрија',
'Бразил',
'Канада',
'Данска',
'Египат',
'Француска',
'Немачка',
'сад',
'Вијетнам'
];
} - Унутар лоадСеарцхДата() и испод новог низа, набавите див елемент који ће кориснику приказати одговарајуће ставке претраге. Унутар див листе додајте ознаку сидра за сваку ставку података на листи:
// Добија ХТМЛ елемент листе
дозволити листа = документ.гетЕлементБиИд('лист');
// Додајте сваку ставку података као ан таг
земље.за сваки((земља)=>{
дозволити а = документ.цреатеЕлемент("а");
а.иннерТект = земља;
а.цлассЛист.адд("Листа ствари");
листа.аппендЦхилд (а);
}) - У ознаци тела од индек.хтмл, додајте атрибут догађаја онлоад да бисте позвали нову функцију лоадСеарцхДата(). Ово ће учитати податке док се страница учитава.
<боди онлоад="лоадСеарцхДата()"> - У индек.хтмл, пре него што се ознака тела заврши, додајте ознаку скрипте за везу са вашом ЈаваСцрипт датотеком:
<боди онлоад="лоадСеарцхДата()">
<!-- Садржај ваше веб странице -->
<скрипт срц="сцрипт.јс"></script>
</body> - У стилес.цсс, додајте неки стил на падајућу листу:
#листа {
ивица: 1пк чврста светлосива;
бордер-радиус: 5пк;
дисплеј блок;
}
.Листа ствари {
дисплеј: флек;
флек-дирецтион: колона;
текст-декорација: нема;
паддинг: 5пк 20пк;
боја Црна;
}
.Листа ствари:лебдети {
боја позадине: светлосива;
} - Отвори индек.хтмл у веб претраживачу да видите траку за претрагу и листу доступних резултата претраге. Функција претраге још увек не ради, али би требало да видите кориснички интерфејс који ће користити:
Како да направите падајући мени са одговарајућим резултатима унутар траке за претрагу
Сада када имате траку за претрагу и листу стрингова које корисници могу претраживати, можете додати функцију претраживања. Док корисник куца у траку за претрагу, приказаће се само одређене ставке на листи.
- У стилес.цсс, замените стил листе да бисте подразумевано сакрили листу:
#листа {
ивица: 1пк чврста светлосива;
бордер-радиус: 5пк;
приказ: нема;
} - У сцрипт.јс, креирајте нову функцију под називом сеарцх(). Имајте на уму да ће програм позвати ову функцију сваки пут када корисник унесе или уклони знак са траке за претрагу. Неким апликацијама ће бити потребна путовања до сервера да би преузеле информације. У таквим случајевима, ова имплементација би могла успорити ваш кориснички интерфејс. Можда ћете морати да измените имплементацију да бисте ово узели у обзир.
функцијаПретрага() {
// функција претраге иде овде
} - Унутар функције сеарцх() набавите ХТМЛ див елемент за листу. Такође набавите елементе ХТМЛ ознаке сидра сваке ставке унутар листе:
дозволити листЦонтаинер = документ.гетЕлементБиИд('лист');
дозволити листИтемс = документ.гетЕлементсБиЦлассНаме('листИтем'); - Добијте унос који је корисник унео у траку за претрагу:
дозволити улаз = документ.гетЕлементБиИд('сеарцхбар').валуе
инпут = инпут.тоЛоверЦасе(); - Упоредите унос корисника са сваком ставком на листи. На пример, ако корисник унесе "а", функција ће упоредити ако је "а" унутар "Аустралије", затим "Аустрија", "Бразил", "Канада" итд. Ако се подудара, приказаће ту ставку на листи. Ако се не подудара, сакриће ту ставку.
дозволити ноРесултс = истина;
за (и = 0; и < листИтемс.ленгтх; и++) {
иф (!листИтемс[и].иннерХТМЛ.тоЛоверЦасе().инцлудес (инпут) || инпут "") {
листИтемс[и].стиле.дисплаи="ниједан";
Настави;
}
друго {
листИтемс[и].стиле.дисплаи="флек";
ноРесултс = лажно;
}
} - Ако уопште нема резултата на листи, потпуно сакријте листу:
листЦонтаинер.стиле.дисплаи = ноРесултс? "ниједан": "блокирати"; - Кликните на индек.хтмл датотеку да бисте је отворили у веб прегледачу.
- Почните да куцате у траку за претрагу. Док куцате, листа резултата ће се ажурирати тако да приказује само одговарајуће резултате.
Коришћење траке за претрагу за тражење одговарајућих резултата
Сада када знате како да направите траку за претрагу са избором стрингова, можете додати више функционалности.
На пример, можете додати везе у своје сидрене ознаке да бисте отворили различите странице у зависности од резултата на који корисник кликне. Можете да промените траку за претрагу да бисте претраживали сложеније објекте. Такође можете модификовати код да ради са оквирима као што је Реацт.