PHP AJAX live search probléma

PHP AJAX live search probléma
2014-12-01T19:59:31+01:00
2014-12-02T20:47:30+01:00
2022-10-15T22:50:43+02:00
Vikker
Sziasztok!

Hozzátok fordulok, hátha tudtok nekem segíteni. Először is, pls nem kell a kritika, biztos sokan jobbat, szebbet, és más rendszereket tudtok csinálni, de nekem ez az "alap" is bőven megteszi...jah. és amatőr szinten vagyok nagyon, légyszi vegyétek figyelembe! köszi. ;)
Elsődlegesen: Egy HTML lapról lenne szó, ahol
- adott egy kereső doboz a lapomon, ami szépen is néz ki, egyszerű CSS-ben vannak megadva a paraméterek.  Külön egy szövegdoboz és mellette egy gomb.
- Ezt szerettem volna működőképessé "varázsolni". Találtam egy egész egyszerű, de nekem bőven megfelelő leírást.
Itt: PHP AJAX Live Search
A felállás ugyanez. head mezőben egy az egyben ugyanez a srcipt van, body részen viszont a sajátomba "fűztem" be az "onkeyup="showResult......." -ot.

<form id="tfnewsearch" method="get" action="livesearch.php"> <input class="tftextinput" type="text" name="q" size="21" maxlength="120" onClick="this.value='';" onFocus="this.select()" onkeyup="showResult(this.value)" value="keresés..."><input type="submit" value="keresés" class="tfbutton"> <div id="livesearch"></div> </form>
PHP ugyanúgy, az XML-es link pedig személyre szabott. (lényegében nekem arra kell, hogy adok egy adatbázist, ahol bizonyos linkeknek adok nevet, és ha elkezdem betűnként beírni a keresőbe, akkor az alapján szelektálva kiadja a megfelelő linket, és utána rákattintva elvisz az adott oldalra..)

A helyzet úgy néz ki, hogy offline nem működik, de ha felrakom a webre akkor megy rendesen egyetlen egy kivétellel.

Szóval a hiba nálam annyi, hogy van a keresődoboz, amibe írnék. Szépen működik, le is nyílik egy ablak az eddig keresett vagy beírt szövegekkel, betűkkel, amiket más oldalakon használtam. (( de csak akkor, ha a form-ba benne van a "name="q"")). Annyi a bajom, hogy ahogy a szöveget gépelem be, ez alatt a lenyíló ablak alatt egy "átlátszó" háttérben jeleníti csak meg azokat a címszavakat, és linkeket, amik nekem az adatbázisban vannak. És nem ott ahol kéne. Szóval nem a lenyíló részen.
Ha nem adok neki "nevet", akkor simán a kereső alatt.
Ez szép meg jó is lenne, ha az oldal csutka fehér lenne. Ha nem adok neki "nevet", akkor abból a szempontból jobb, hogy amit más oldalakra beír az ember, akkor legalább nem lesz ott. Viszont hogy tudnám megoldani azt, hogy ugyanilyen "lenyíló" formában jelenjen meg a begépelendő szöveg??
Bocsi, amúgy elég amatőr vagyok, szóval pls így álljatok hozzám. Tudna valaki valami érdemlegesben segíteni?
Mutasd a teljes hozzászólást!
A css definíciók közé vegyél fel egy

#livesearch { background-color: #ffffff; }


definíciót. A name="q" részt bármire lecserélheted, csak a php fájlban is át kell írni a $_GET['q'] értéket ugyanarra.

ui: Bocsi, helyesbítek, nem kell módosítanod a php fájlt!
Mutasd a teljes hozzászólást!

  • Szia!

    Ha dobsz ide egy linket a működő oldalról, biztosan lenne aki segítene.
    Mutasd a teljes hozzászólást!
  • Szia!

    Sajna nem tudok, de hogy szemléltessem csatolok egy képet:

    A lényege, hogy a kép felső részén, ahogy írnám be a betűt, akkor meg is találja azokat a neveket, amik adott linkre vinnének. (csak éppen a háttérben totál átlátszó..stb.)

    A kép alsó részén pedig ugyanez van, annyi a különbség, hogy a body részbe írt
    -- ahol a search form van --
    name="q" <-- be van biggyesztve és emiatt mindenféle más szó, amit használtam más oldalakon is megjelenik, mögötte meg az, amit szeretnék láttatni és persze egy "lenyíló panelben".

    Igazából ezt kellene valahogy úgy összehozni, hogy amit az "adatbázisban" szeretnék keresni, azokat mutassa csak, és látható is legyen, ne úgy, mint itt.. Már filóztam rajta, az is lehet, hogy a script-en belül kéne valamit mókányolni, de mivel nem vágom, ezért kérek segítséget.
    Az oldalt nem tudom belinkelni, de egyébként felesleges is lenne, mert egy az egyben ugyanaz van mindenhol, mint itt: PHP AJAX Live Search
    Azért mondom ezt még "tudatlanul" is ilyen "magabiztosan", mert ha csinálok egy teljesen üres lapot, úgy, hogy semmi mellékes nincs, csak és kizárólag ezek, akkor is ugyanezt csinálja.

    HTML-be:

    <form id="tfnewsearch" method="get" action="livesearch.php"> <input class="tftextinput" type="text" name="q" size="21" maxlength="120" onClick="this.value='';" onFocus="this.select()" onkeyup="showResult(this.value)" value="keresés..."><input type="submit" value="keresés" class="tfbutton"> <div id="livesearch"></div> </form>
    CSS-be pedig ez van megadva a keresődoboznak:

    @import url(http://fonts.googleapis.com/css?family=Ubuntu:500italic&subset=latin,latin-ext); @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700&subset=latin,latin-ext); #tfnewsearch{ position: absolute; margin-right:40px; right:40px; top:15px; } .tftextinput{ width:145px; height:25px; margin: 0; font-family: "Ubuntu",sans-serif; font-size:12px; color:#999; padding-left: 10px; border:0px solid #0076a3; border-right:0px; border-top-left-radius: 5px 5px; border-bottom-left-radius: 5px 5px; } .tfbutton { margin: 0; padding: 6px 10px; font-family: 'Source Sans Pro', sans-serif; font-size:12px; outline: none; cursor: pointer; text-align: center; text-decoration: none; color: #ffffff; border: solid 0px #0076a3; border-right:0px; background: #0c9699; background: -webkit-gradient(linear, left top, left bottom, from(#5ebbbb), to(#0078a5)); background: -moz-linear-gradient(top, #5ebbbb, #0078a5); border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; } .tfbutton:hover { text-decoration: none; background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); } /* Fixes submit button height problem in Firefox */ .tfbutton::-moz-focus-inner { border: 0; } .tfclear{ clear:both; }
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Szia

    Nekem van egy ilyenem, egész jól működik, próbáld ki. (Jquery UI plugint is be kell hívni hozzá)

    function autocomplet() { var min_length = 1; // min caracters to display the autocomplete var keyword = $('#country_id').val(); if (keyword.length >= min_length) { $.ajax({ url: 'files/search_videos.php', type: 'POST', data: {keyword:keyword}, success:function(data){ $('#country_list_id').show(); $('#country_list_id').html(data); } }); } else { $('#country_list_id').hide(); } } // set_item : this function will be executed when we select an item function set_item(item) { // change input value $('#country_id').val(item); // hide proposition list $('#country_list_id').hide(); }

    <div class="header_search_div"> <form id="header_search_form" method="post" action="#"> <input type="text" autocomplete="off" id="country_id" name="country_id" onkeyup="autocomplet()" placeholder="Videók keresése.." /> <input type="submit" value="" name="header_search_button" class="header_search_button" title="Keresés" /> </form> <ul id="country_list_id"></ul> </div>

    .header_search_div{ position:absolute; top:14px; left:200px; } #country_id{ background:#fff; outline:none; border:1px solid #fff; border-radius:4px; width:400px; height:22px; padding-left:5px; font:13px Tahoma, Geneva, sans-serif; color:#222; } #country_list_id{ z-index:9; padding:0; margin:0; list-style:none; width:405px; border:1px solid #ccc; background:#fff; position:absolute; top:23px; left:1px; } .autocomplete_item_text{ display:block; font:bold 13px Arial, Helvetica, sans-serif; color:#222; margin:5px 0; padding-left:5px; cursor:pointer; } .autocomplete_item_text:hover{ text-decoration:underline; }
    <?php include_once("connect.php"); $q = $_POST['keyword']; $sql = "SELECT DISTINCT tag_text FROM tags WHERE tag_text LIKE '%$q%' LIMIT 30"; $result = mysqli_query($kapcs, $sql) or die(mysqli_error()); if($result) { while($row=mysqli_fetch_array($result)) { echo '<li class="autocomplete_item_text" onclick="set_item(''.str_replace("'", "'", $row['tag_text']).'')">'.$row['tag_text'].'</li>'; } } ?>
    Mutasd a teljes hozzászólást!
  • A css definíciók közé vegyél fel egy

    #livesearch { background-color: #ffffff; }


    definíciót. A name="q" részt bármire lecserélheted, csak a php fájlban is át kell írni a $_GET['q'] értéket ugyanarra.

    ui: Bocsi, helyesbítek, nem kell módosítanod a php fájlt!
    Mutasd a teljes hozzászólást!
  • Üdv,

    ha a php fájlodból a mysql lekérdezést beidézted volna, akkor módosítottam volna az én live-search scriptemet. Így csak nézd át. Hátha okosabb leszel.
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Huhh.. kibökte a szemem... Köszönöm! És köszönöm mindenki segítő hozzáállását!
    Kicsit "átformálom" és már jó is. @ferrari458 köszi neked is! ez most ebben a formában egyszerűbb volt. @csörnyeföldi neked is ezer hála, hogy benéztél és foglalkoztál a problémámmal.!

    Egy utolsó kérdés, lehet aztán ez is "lámaság", de mivel tudnám megoldani, hogy ez a #livesearch ablak, ami lenyílik, minden előtt legyen? Tehát nehogy véletlenül adott elem mögé essen, csak előre?

    Köszi még egyszer mindenki!
    Mutasd a teljes hozzászólást!
  • Css-ben a z-index értéket állítsd nagyobbra, valahogy így:

    #livesearch { z-index: 9000; }
    Mutasd a teljes hozzászólást!
  • Köszönöm!

    Igazából úgy működött csak, hogy beraktam elé egy ilyet:

    position: absolute; z-index: 9999 !important;
    De a lényeg, hogy így működik! köszi még egyszer! ;)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd