Muž vždy hľadá položku php i. Živé vyhľadávanie na Bitrixe. Príklad implementácie. Podrobné vyhľadávanie kontaktov
Najlepší spôsob, ako udržať používateľa na stránke, je nechať ho nájsť to, čo hľadá. Ak na to vytvoríte vhodný systém, úroveň preferencií vašich stránok porastie a používateľ sa určite vráti, aby našiel to, čo ho zaujíma.
Ukážem vám, ako vytvoriť jednoduchý, no funkčne efektívny vyhľadávací formulár, ktorý bude slúžiť na vyhľadávanie článkov na stránke. Výsledky sa zobrazia na stránke bez akéhokoľvek opätovného načítania, čo je nepochybne najlepší spôsob prezentácie informácií.
Vytvorím 2 súbory: search.php ktorý bude obsahovať HTML a JavaScript. Druhý súbor, do_search.php, bude obsahovať kód PHP. Začnime vytvárať prvý súbor:
Skúste napísať slovo ajax
V tomto súbore sme vytvorili bežný HTML formulár, ktorý odosiela požiadavku POST do back-end súboru do_search.php.
select_list ($ sql); if (počet ($ riadok)) ($ end_result = ""; foreach ($ riadok ako $ r) ($ výsledok = $ r ["title"]; $ bold = " ". $ slovo.""; $ end_result. ="
PHP kód obsahuje komentáre, pomocou ktorých môžete ľahko pochopiť, ako skript funguje. Ak sa v databáze nachádzajú zhody, zobrazíte ich používateľovi a tučným písmom zvýrazníte slová, ktoré používateľ hľadal.
Pridajme k tomu všetkému nejaké CSS:
Telo (rodina písma: Arial, Helvetica, bezpätkové;) * (okraj: 0; výplň: 0;) #container (okraj: 0 auto; šírka: 600px;) a (farba: # DF3D82; dekorácia textu: žiadny) a: hover (farba: # DF3D82; text-decoration: underline;) ul.update (štýl zoznamu: žiadny; veľkosť písma: 1,1 em; okraj-horný: 10px) ul.update li (výška: 30px; border-bottom: #dedede solid 1px; text-align: left;) ul.update li: first-child (border-top: #dedede solid 1px; height: 30px; text-align: left;) #flash (margin- top: 20px; text-align: left;) #searchresults (text-align: left; margin-top: 20px; display: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: # 000;) .word (hmotnosť písma: tučné; farba: # 000000;) #search_box (odsadenie: 4px; orámovanie: plné 1px # 666666; šírka: 300px; výška: 30px; veľkosť-písma: 18px; -moz- border-radius: 6px; -webkit-border-radius: 6px;) .search_button (border: # 000000 solid 1px; padding: 6px; color: # 000; font-weight: bold; font-size: 16px; -moz- border-radius: 6px; -webkit-border-radius: 6px;) .found (font-weight: bold ; štýl písma: kurzíva; farba: # ff0000; ) h2 (pravý okraj: 70px;)
Teraz ste sa naučili, ako vytvoriť jednoduchý vyhľadávací formulár, ktorý funguje bez opätovného načítania stránky. Dúfam, že sa vám návod páčil.
Od autora: pozdravujem priatelia. V tomto článku budeme pokračovať v implementácii živého vyhľadávania stránky. Čo je to živé vyhľadávanie? Stretávate sa s ním neustále, keď hľadáte niečo v Google alebo Yandex. Hneď ako začnete písať vyhľadávací dopyt, vyhľadávač vám okamžite začne ponúkať možnosti, z ktorých si stačí vybrať tú najvhodnejšiu. Pohodlná vec, nie? Skúsme a niečo podobné zrealizujeme.
Zdrojové súbory k aktuálnemu článku si môžete stiahnuť na adrese. Prvú časť článku nájdete na.
V prvej časti sme teda pripravili databázu, ktorá bude slúžiť na živé vyhľadávanie, a do vyhľadávacieho poľa na našej stránke sme prišróbovali aj widget Autocomplete knižnice jQuery UI. Widget zatiaľ funguje s testovacími dátami, no teraz to s vami opravíme.
V prvom rade si označíme iný zdroj údajov pre widget, bude to povedzme súbor search.php, ktorý si tiež musíme vytvoriť.
$ (funkcia () ($ ("# vyhľadávanie"). automatické dopĺňanie ((zdroj: "search.php"));));
Teraz do vyhľadávacieho poľa napíšem ľubovoľný znak a uvidím, čo sa stane v konzole prehliadača.
Ako vidíte, požiadavka GET sa odošle s parametrom termínu, ktorého hodnotou je reťazec zadaný do vyhľadávacieho poľa. V tomto prípade sa všetko deje asynchrónne, bez opätovného načítania stránky, t.j. používa AJAX.
Skvelé, teraz už zostáva len prijať prichádzajúcu požiadavku na vyhľadávanie a dať na ňu odpoveď. Ak to chcete urobiť, musíte zorganizovať pripojenie k databázovému serveru a napísať jednoduchý kód, ktorý na požiadanie dostane údaje z databázy. Kód súboru search.php bude vyzerať takto:
$ db = mysqli_connect ("localhost", "root", "", "world") alebo zomrieť ("Žiadne pripojenie k databáze"); mysqli_set_charset ($ db, "utf8") alebo zomrieť ("Znaková sada pripojenia nie je nastavená"); / ** * vyhľadávanie s automatickým dopĺňaním ** / funkcia search_autocomplete () (globálne $ db; $ vyhľadávanie = trim (mysqli_real_escape_string ($ db, $ _GET ["term"])); $ query = "SELECT Name FROM city WHERE Name LIKE" % ($ vyhľadávanie)% "LIMIT 10"; $ res = mysqli_query ($ db, $ dotaz); $ result_search = pole (); while ($ riadok = mysqli_fetch_assoc ($ res)) ($ result_search = pole ("štítok" => $ riadok ["Name"]);) return $ result_search;) if (! empty ($ _ GET ["term"])) ($ search = search_autocomplete (); exit (json_encode ($ search));)
$ db = mysqli_connect ("localhost", "root", "", "world") alebo zomrieť ( "Neexistuje žiadne pripojenie k databáze") ; mysqli_set_charset ($ db, "utf8") alebo zomrieť ( "Kódovanie pripojenia nie je nastavené") ; * automatické dopĺňanie vyhľadávania function search_autocomplete () ( globálne $ db; $ search = trim (mysqli_real_escape_string ($ db, $ _GET ["term"])); $ res = mysqli_query ($ db, $ dotaz); $ vysledok_vyhladavania = pole (); while ($ riadok = mysqli_fetch_assoc ($ res)) ( $ result_search = pole ("štítok" => $ riadok ["Názov"]); návrat $ result_search; if (! prázdne ($ _GET ["term"])) ( $ hľadať = vyhľadávanie_automatické dokončovanie (); exit (json_encode (hľadanie $)); |
Upozorňujeme, že funkcia search_autocomplete, ktorá prijíma údaje na požiadanie, musí tieto údaje vrátiť v určitom formáte, musí to byť pole s kľúčmi štítkov a hodnotami nájdených miest. Po zavolaní funkcie je potrebné údaje previesť do formátu JSON.
Zostáva otestovať prácu nášho živého hľadania. Aby sme to urobili, rovnako ako naposledy, napíšeme iba jedno písmeno - a:
Dobre! Ako odpoveď sme dostali tucet miest, v názve ktorých sa zadané písmeno vyskytuje. Ak budeme pokračovať v písaní mena, zmení sa zoznam možností, t.j. s každým listom bude odoslaná nová požiadavka AJAX.
11,1 tisJednou z najobľúbenejších a najzákladnejších funkcií na akomkoľvek webe je vyhľadávanie realizované pomocou špeciálneho formulára. Táto funkcia umožňuje návštevníkom rýchlo nájsť obsah, ktorý ich na stránke zaujíma.
Dnes vám chceme povedať, ako vykonať vyhľadávanie na stránke pomocou špeciálneho formulára, ktorý bude vyhľadávať databázové tabuľky a zobrazovať informácie o aktuálnych manažéroch na stránke. Naučíte sa vytvárať databázové tabuľky, ktoré budú obsahovať informácie o aktuálnom personáli.
Vyvíjajte vyhľadávacie formuláre pomocou PHP a tiež sa oboznámte s SQL ( Štruktúrovaný Dopytovací Jazyk) - špeciálny jazyk na zhromažďovanie, zaznamenávanie a úpravu informácií obsiahnutých v databázach. Skôr ako začnete, odporúčame vám stiahnuť súbory projektu.
Čo potrebuješ
- Nástroj na prácu s databázami MySQL.
- Lokálny alebo vzdialený server s podporou PHP.
- Textový editor.
Vytvárame databázu
Ak si nie ste úplne istí, že viete zistiť databázu na svojom hostingu, kontaktujte poskytovateľa hostingu a požiadajte ho o príslušné pokyny alebo pomoc. Po vytvorení databázy ju budete musieť pripojiť, vytvoriť tabuľku a zapísať do nej potrebné údaje.
Najpopulárnejším nástrojom na správu MySQL je PHP My Admin. Tento nástroj bude pre náš dnešný tutoriál stačiť.
Vytvorenie tabuľky
Naša tabuľka by mala byť vytvorená v nasledujúcom formáte:
Názov stĺpca | Dátový typ | Dĺžka | Null or Not Null | Primárny kľúč? | Automatický prírastok |
ID | INT | 1 | Nie Null | Áno | Áno |
Krstné meno | Varchar | 50 | Nie Null | Nie | Nie |
Priezvisko | Varchar | 50 | Nie Null | Nie | Nie |
Varchar | 50 | Nie Null | Nie | Nie | |
Telefónne číslo | Varchar | 15 | Nie Null | Nie | Nie |
Databázová tabuľka sa skladá zo stĺpcov a riadkov, rovnako ako v Exceli. Prvý stĺpec umožňuje identifikovať údaje podľa názvu. Nasleduje stĺpec Typy údajov, ktorý nám udáva typ údajov obsiahnutých v stĺpci. Pole Dĺžka určuje maximálne množstvo pamäte (úložného priestoru) pre stĺpec tabuľky. Používame premenné, ktoré poskytujú väčšiu flexibilitu. Inými slovami, ak je dĺžka celého mena menšia ako 50 znakov, zaberie sa iba časť prideleného priestoru.
A medzi personálnymi údajmi nemôžu byť žiadne prázdne hodnoty ( null, prázdny). Prvý riadok je zvýraznený žltou farbou, pretože stĺpec ID je naším primárnym kľúčom. Hlavný kľúč v databáze zabezpečuje, že každý záznam je jedinečný. Tento stĺpec sa tiež automaticky zvyšuje, čo znamená, že každému záznamu v našej databáze bude automaticky pridelené jedinečné číslo.
Do tabuľky zapisujeme zástupcov zamestnancov
Keď pochopíte tabuľku, začnite ju plniť údajmi. Na zafixovanie postupu vo vašej mysli stačí 6 záznamov. Nižšie je môj vlastný príklad:
ID stĺpca | Krstné meno | Priezvisko | Telefónne číslo | |
2 | Ryan | Butler | [e-mail chránený] | 417-854-8547 |
3 | Brent | Callahan | [e-mail chránený] | 417-854-6587 |
Dizajn formulára
Ak chcete vytvoriť formulár na vyhľadávanie na stránkach pomocou Google, otvorte akýkoľvek vhodný textový editor. Odporúčam používať bezplatný PSPad. Môžete použiť ľubovoľný textový editor, ktorý poskytuje zvýraznenie syntaxe. To značne uľahčí proces písania a ladenia PHP kódu. Keď vytvárate stránku pre vyhľadávací formulár, nezabudnite ju uložiť vo formáte .php, inak nebude kód PHP analyzovaný podľa očakávania. Po uložení dokumentu doň skopírujte nasledujúce označenie:
Podrobné vyhľadávanie kontaktov
Môžete vyhľadávať podľa mena alebo priezviska
Ak sa vyznáte v HTML, tak by vám malo byť všetko jasné aspoň po úvodnú značku formulára. Vo vnútri tohto tagu je najdôležitejší prvok celého kódu – atribút action. Ako akciu pre náš formulár sme zadali názov nášho súboru a potom sme použili reťazec dopytu „ ísť”.
Kontrola súladu s kritériom
Keď používateľ zadá meno alebo priezvisko a potom klikne na tlačidlo Odoslať, formulár odovzdá údaje sebe a pridá reťazec dopytu „ ísť“. V tomto bode skontrolujeme prítomnosť reťazca dotazu go. Ak je výsledok pozitívny, zobrazíme výsledky vyhľadávania.
Pred zobrazením požadovaných výsledkov musíme ešte raz skontrolovať: (1) bol formulár odoslaný, (2) obsahoval reťazec dopytu go, (3) bol vyhľadávací dopyt zadaný malými alebo veľkými písmenami? Ak žiadna z kontrol neposkytuje pozitívny výsledok ( pravda), potom nie sme povinní vykonávať žiadne akcie.
Najprv pridajte malý blok kódu PHP na vyhľadávanie na stránkach za uzatváraciu značku.: