• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Live Search - ähnlich wie bei google

G

Gokar

Neues Mitglied
Hallo Community,

heute gehts um Live Search. Ich würde gerne eine google ähnliche Sucheleiste zusammenstellen.

Wie weit bin ich bisher?
Ich habe ein Beispiel ( PHP Example AJAX Live Search ) im Netz gefunden, dass so ungefähr einhergeht mit dem was ich gemacht habe.
Ein paar Dinge, habe ich zwar anders gestaltet und dann steht noch eine kleine Datenbank dahinter, aber prinzipiell ist es für die hier gestellte Frage egal wo die Daten mit Hifle von AJAX herkommen und wie es grob aussieht. Soll Euch nur demonstrieren in welche Richtung es gehen soll.

Wenn ihr Euch ganz kurz mal das Beispiel angesehen habt, kommen wir zum Kern der Frage bzw. zum Problem. Und zwar ist das der 'Bereich' in dem die Suchergebnisse dargestellt werden. Ich hatte ein paar Denkansätze, komme aber nicht drauf, wie das am besten zu lösen ist.

Ich habe im Grunde aber nur versucht auf mehrere Arten einen div-Container zu befüllen, welcher dann unter dem entsprechenden Suchfeld (hier 'inpSearch') plaziert werden soll:

HTML: 
<form action="searchResult.php" method="post">
            <input type="text" id="inpSearch" onkeyup="loadContent(this.value)" onblur="hideSearchbar()" onfocus="startmarkCell()">
            <br><input type="text">
            <br><input type="text">
            <br><input type="text">
            <br><input type="text">
            <br><input type="text">            
</form>
<div id="searchBar" class="searchBar">
            [.. hier kommt der responseText des xmlHttpObjekts rein ..]
</div>

Wobei ich mir nun halt unsicher bin, ist wie dieser befüllt werden soll. Eine Liste, eine Tabelle, einfach nur blanke Textzeilen...? Ich habe schon ein paar Wege beschritten, mit Hilfe von Javascript die onclick, onkeydown und onblur Methoden zum Leben erweckt, aber nichts kommt eben an das ran, wie ich es gerne hätte, sondern eckt immer irgendwo wieder an.

Was möchte ich?
Eigentlich nur eine Art Dropdown Liste mit den fünf oder zehn besten Ergebnissen.
Die Einträge sollen über die Navigations-Pfeiltasten und natürlich durch die Maus anwählbar sein, wobei der Text eines markierten Eintrags durchs Auswählen in die Suchleiste übertragen und diese dann ausgeblendet wird, was ebenefalls geschehen soll wenn der Fokus nicht mehr im Suchfeld liegt um weitere Formularfelder nicht länger zu überdecken, als nötig.


Vielleicht hat ja einer von Euch das schon mal bearbeitet oder eine gute Idee.


Ich würde mich sehr freuen und bedanke mich im Voraus für Eure Zeit!


Liebe Grüße,
Gokar
 
Wieso arbeitest du nicht mit dem jQuery Autocomplete? Statt einer Text-Datei mit Einträgen kannst du eine PHP-Datei schreiben, die nach dem eingegebenen String in einer Datenbank sucht und die Treffer als Plain Text ausgibt. Das jQuery Autocomplete erledigt den Rest ;)

MfG Timmaeh
 
Hallo,

ich arbeite ja bereits mit einer php-Datei, die Ergebnisse aus meiner Datenbank liest.

Das mit dem Autocomplete von jQuery klingt gut, aber ich wollte einfach rausfinden, ob es auch ohne geht.
Scheint aber keine gute Idee zu sein?

Ich habe bisher noch nie mit jQuery gearbeitet.
Wie schwer schätzt Du es für einen Neuling ein so etwas zu konstruieren?


Liebe Grüße,
Gokar
 
Schau es dir doch einfach mal an :) jQuery UI - Autocomplete Demos & DocumentationQuery ist leicht zu lernen. Es ist ein Framework, welches den Umgang mit Javascript erleichtert. jQuery-ui ist eine Erweiterung für jQuery und bietet schon fertige Komponenten. Bei dem Link findest du Beispiel für Auto-Complete :)
 
Bin schon dabei die ersten Schritte zu machen.
Habe mich mal hier rangeheftet ( Tutorials - jQuery JavaScript Library )

Schaue mir danach dann Deinen Link an, vielen Dank :)

edit:

habe mir das Beispiel von Dir ( http://jqueryui.com/demos/autocomplete/default.html ) jetzt mal angeschaut.

Derjenige hat da in seiner Datei ne ganze Menge Zeug eingebunden:

HTML: 
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">

.. ohne diese Dateien 'jquery.ui.position.js', 'jquery.ui.autocomplete.js', etc.. komm ich dann auch nicht weit oder?
Ist das alles Bestandteil von oder aufbauend auf jQuery UI?
 
Zuletzt bearbeitet:
Danke für den Link.

Habe mit dem Builder mir jetzt ein Layout gewählt (unwichtig erst mal ^^), die entsprechenden Dateien downgeloaded, in mein Verzeichnis verschoben und in meiner Datei verlinkt.
Geholfen hat mir dabei dieser Link ( jQuery UI - Documentation: UI/Getting_Started ) sowie die im Download enthaltene index.php.

Mit den Werten eines in JS angelegten Arrays funktioniert der/das Autocomplete jetzt soweit.


Hier ( UI/API/1.8/Autocomplete - jQuery JavaScript Library ) sind jetzt folgende Möglichkeiten für die Quelle beim Autocomplete aufgezählt:

  • an Array with local data
  • a String, specifying a URL
  • a Callback
Zum Vergrößern anklicken....

Momentan verwende ich testeweise ja das erste. Ich möchte allerdings ja mittels der Benutzereingabe im Suchfeld in der Datenbank nach Matches suchen.

Ich könnte zwar ein mal beim Laden der Seite über die komplette DB fahren und ein Array aus php weg in Javascript übergeben, welches alle Suchbegriffe enthält, finde allerdings, dass diese Methodik etwas unprofessionell wirkt?

Die Rede ist fortan noch von 'JSON data' und vom einem 'request parameter "term"' und diesem 'Callback'. Leider sind mir diese Schlagworte auch noch keine Begriffe.
Mit AJAX hat das ganze jetzt nichts mehr direkt zu tun, richtig?
 
Zuletzt bearbeitet:
Was ist denn daran auszusetzen, einfache Methoden zu nutzen? Hat mit Proffesionalität jedenfalls nichts zu tun.

Das Autocomplete Plugin macht einen AJAX Request automatisch, wenn du als Quelle eine Autocomplete URL angiebst.
 
So war es nicht gemeint. Ich bin der größte Freund einfacher Methodik.
Ich war mir nur unsicher, ob das eine gute Idee ist. Schliesslich könnte die Datenquelle auf diese Art und Weise (da immer nur beim Seitenaufbau befüllt) 1. unvollständig/nicht aktuell sein und 2. bei einer großen Datenbank unnötig viele Einträge enthalten.

Ok. Müsste ich dann so vorgehen oder wie sieht das aus?

Code: 
            $('input#searchText').autocomplete({
                source: 'script.php?eingabe='input#searchText.value
            });

Brauche ich dann die Zuweisung des XMLHttpRequest etc. noch?

Code: 
            var xmlHttpObject = false;
            
            if (typeof XMLHttpRequest != 'undefined')
            { xmlHttpObject = new XMLHttpRequest(); }
            if (!xmlHttpObject)
            {
                try
                {
                    xmlHttpObject = new ActiveObject("Msxml2.XMLHTTP");
                }
                catch (e)
                {
                    try
                    { xmlHttpObject = new ActiveObject("Microsoft.XMLHTTP"); }
                    catch (e)
                    { xmlHttpObject = null; }
                }            
            }            
            function loadContent(eingabe)
            {
                xmlHttpObject.open('get', 'script.php?eingabe='+eingabe);
                xmlHttpObject.onreadystatechange = handleContent;
                xmlHttpObject.send(null);
            }            
            function handleContent()
            {
                if (xmlHttpObject.readyState == 4)
                {    
                    [COLOR=#008000]// Verarbeitung
                    // ... = xmlHttpObject.responseText;[/COLOR]
                }
            }

Und was und in welcher Form muss die Seite, die den Datenextrakt macht dann zurückgeben?
Wird dann von der php-Datei per echo ein konvertierter JSON-Code zurückgegeben?

PHP: 
<?php
// PHP-Objekt
$obj = new stdClass();
$obj->results = array('ergebnis1', 'ergebnis2', 'ergebnis3', '...', 'ergebnisn');

 // Objekt umwandeln
$output = json_encode($obj);
echo($output);
?>

Wie erfolgt dessen Weiterverarbeitung/Verwendung, dass der Autocomplete mit den Werten dann etwas anfangen kann?
 
Zuletzt bearbeitet:
Gokar schrieb:
Ich war mir nur unsicher, ob das eine gute Idee ist. Schliesslich könnte die Datenquelle auf diese Art und Weise (da immer nur beim Seitenaufbau befüllt) 1. unvollständig/nicht aktuell sein und 2. bei einer großen Datenbank unnötig viele Einträge enthalten.
Zum Vergrößern anklicken....

Da es sich um einen AJAX Aufruf handelt, kannst du alle Daten direkt aus der Datenbank beziehen. Das Autocomplete Plugin hat zwar einen Cache-Mechanismus, diesen kannst du aber in den Options deaktivieren. Die Anzahl der Einträge kannst du im Plugin definieren, aber natürlich kannst du auch im PHP-Skript, welche deine Datenquelle darstellt, die Anzahl begrenzen.

Gokar schrieb:
Wie erfolgt dessen Weiterverarbeitung/Verwendung, dass der Autocomplete mit den Werten dann etwas anfangen kann?
Zum Vergrößern anklicken....

Du kannst die Daten auch als Plain-Text ausgeben, also ein Wert pro Zeile. (wobei du kein Objekt erstellen musst, ein einfacher Array reicht auch.)
PHP: 
implode("\n", $obj->results);

Den restlichen Code benötigst du nicht, du brauchst nur deinen Connect zur Datenbank, die Verarbeitung der Daten und derren Ausgabe ;)

MfG Timmaeh
 
Hallo,

tut mir leid. Kam in den letzten Tagen nicht dazu weiter zu forschen.

Ich danke Dir sehr für die Hilfsbereitschaft, aber eine Frage bliebe noch offen:

Wie setze ich denn jetzt den AJAX-Request ab, um die Daten aus der DB als Source für den Autocomplete ranzuschaffen?
Ich bräuchte am besten ein Coding Beispiel oder einen Link mit einem Tutorial etc.


Das wäre KLASSE! Vielen Dank im Voraus.


Lg, Gokar
 
jQuery UI hat dafür auch was Fertiges.

- jQuery UI - Autocomplete Demos & Documentation

Hm, wurde sogar bereits verlinkt, sorry.

Na dann das:

PHP: 
<?php

// Create list of all functions starting with $input
function getFunctions($input)
{
    $functionList = array();

    foreach (get_defined_functions() as $name => $section) {
        if ($name !== 'internal') {
            continue;
        }

        foreach ($section as $functionName) {
            if (strpos($functionName, $input) === 0) {
                $functionList[] = $functionName;
            }
        }
    }

    return $functionList;
}

if (isset($_GET['term'])) {
    $funcs = getFunctions($_GET['term']);

    sort($funcs);

    echo json_encode($funcs);

    exit;
}

?><!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

    <style>
    #demo { height: 40px;}
    #content-wrapper { position: absolute; top: 40px; right: 0; bottom: 0; left: 0; }
    #content { display: none; width: 100%; height: 100%; border: none; }

    .ui-autocomplete {
        max-height: 400px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }
    /* IE 6 doesn't support max-height
     * we use height instead, but this forces the menu to always be this tall
     */
    * html .ui-autocomplete {
        height: 400px;
    }
    </style>

        <script>
    $(function() {
        var loadDocuPage = function (funcname) {
                $('#content').attr('src', 'http://php.net/' + encodeURIComponent(funcname));
                $('#content').css('display', 'block');
            };

        $( "#tags" ).autocomplete({
            source: '<?php echo basename(__FILE__); ?>',
            minLength: 2,
            select: function (event, ui) {
                loadDocuPage(ui.item.value);
            }
        });

        $('#tags').bind('keypress', function (event) {
            if (event.which === 13) {
                loadDocuPage($(this).val());
            }
        });
    });
    </script>

    </head>

    <body>
        <div class="demo">

        <div class="ui-widget">
            <label for="tags">Function name: </label>
            <input id="tags">
        </div>

        </div><!-- End demo -->

        <div id="content-wrapper">
            <iframe id="content"></iframe>
        </div>
    </body>

</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben