Najlepší spôsob, ako udržať používateľa na stránke, je nechať ho nájsť to, čo hľadá. Ak to urobíte pohodlný systém, potom bude miera preferencie vašej stránky rásť 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 na stránke objavia bez akéhokoľvek opätovného načítania, čo nepochybne je najlepšia cesta poskytovanie informácií.
Vytvorím 2 súbory: search.php, ktoré budú obsahovať HTML a JavaScript. Druhý súbor, do_search.php, bude obsahovať kód PHP. Začnime vytvárať prvý súbor:
PHP, ukážka vyhľadávania jQuery $(function() ( $(".search_button").click(function() ( // získajte, čo používateľ napísal var searchString = $("#search_box").val(); // formulár reťazec dopytu var data = "search="+ searchString; // ak searchString nie je prázdny if(searchString) ( // vytvorte požiadavku ajax $.ajax(( typ: "POST", url: "do_search.php", data: data, beforeSend: function(html) ( // sa spustí pred volaním požiadavky $("#results").html(""); $("#searchresults").show(); $(". word").html (searchString); ), success: function(html)( // sa spustí po prijatí výsledkov $("#results").show(); $("#results").append(html) ;)) )); ) vráti false; )); )); Skúste zadať slovo ajax
Výsledky pre
V tomto súbore sme vytvorili bežný HTML formulár, ktorý odosiela požiadavku POST na back-end – súbor do_search.php.
Kód PHP obsahuje komentáre, takže 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.
Dajme tomu všetkému trochu CSS:
Telo( font-family:Arial, Helvetica, sans-serif; ) *( margin:0;padding:0; ) #container ( margin: 0 auto; width: 600px; ) a ( color:#DF3D82; text-decoration: none ) a:hover ( color:#DF3D82; text-decoration:underline; ) ul.update ( list-style:none;font-size:1.1em; margin-top:10px ) ul.update li( height: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; farba: #000; ) .word ( font-weight:bold; color:#000000; ) #search_box ( padding:4px; border:solid 1px #666666; width:300px; height:30px; font-size: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; )
Takže 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 lekcia páčila.
V dnešnej lekcii sa pozrieme na vyhľadávanie php mysql. Existuje obrovské množstvo vyhľadávacích skriptov, niektoré využívajú databázu, iné sa zaobídu bez nej, existujú pokročilé vyhľadávanie s presným triedením. Zameriame sa na bežné jednoduché vyhľadávanie, ktoré hľadá informácie na dvoch tabuľkách z databázy MySQL.
Prvý krok. Databáza MySQL.
Vytvorenie databázy search_lite, má dve tabuľky správy- novinky a vac- voľné pracovné miesta.
Nastaviť privilégiá:
Prihlásiť sa - " koreň",
Heslo - "",
Hostiteľ - " localhost".
Vyhoďte tabuľku noviniek.
Štruktúra tabuľky pre tabuľku „novinky“ -- VYTVORIŤ TABUĽKU, AK NEEXISTUJE „novinky“ („id“ int(2) NOT NULL, „title“ varchar(255) NOT NULL, text „text“ NOT NULL, PRIMÁRNY KĽÚČ (`id `)) ENGINE=MYISAM DEFAULT CHARSET=cp1251;
Vysypaný stôl vac - voľné pracovné miesta.
Štruktúra tabuľky pre tabuľku `vac` -- VYTVORIŤ TABUĽKU, AK NEEXISTUJE `vac` (`id` int(2) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `text` text NOT NULL, PRIMARY KEY (` id`)) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=3 ;
Druhý krok. HTML a PHP.
Pripojenie k databáze. Nastavte podmienku pre premennú $hľadať, kde Vyhľadávací dopyt nie je zadaná, alebo má menej ako 4 znaky a kontrolujeme aj lomky a skrátime premennú. Vytvoríme dva dotazy, ktoré hľadajú dve tabuľky v databáze správy A vac podľa podmienok vyhľadávania podľa poľa text. (Už si môžete vybrať, koľko tabuliek budete potrebovať na vyhľadávanie. Napríklad budete mať tabuľky lekcie, materiálov, články atď.. Môžete tiež zmeniť podmienky vyhľadávania namiesto poľa text, môžete vybrať pole titul alebo iné pole.) Potom pri zobrazení vyhľadávania v premennej uvedieme, koľko znakov je v texte $symboly. Ak v tabuľkách správy A vac Pri vyhľadávaní sa nič nenašlo, zobrazujeme správu. Ak sa nájdu, zobrazte údaje z dvoch tabuliek správy A vac pre daný vyhľadávací dopyt.