Wie man eine einfache autocomplete Suchfeld, das ruft Daten aus der Datenbank?

Ich bin etwas ein noob wenn es um jQuery und MySQL... ich habe gesehen, wie einige der tutorials, aber ich kann nicht herausfinden, wie ich kombinieren, die Dinge, die mit meiner Datenbank. Zum Beispiel habe ich eine Tabelle (?) mit alle meine Themen in der it, die ich als "THEMEN" in meiner Datenbank. Was ich will, ist, dass, wenn jemand nutzt das Suchfeld, das Sie erhalten Anregungen, die in diesen THEMEN.

http://jqueryui.com/autocomplete/

Dies ist ein sehr einfaches AutoVervollständigen, die ich verwenden möchten. Ich kann es mit lokalen Anregungen, aber ich weiß nicht wie ich es kombinieren mit meiner database. Jede Hilfe würde geschätzt werden.

InformationsquelleAutor user1814289 | 2012-12-16
  1. 1

    Ich denke, das ist, was Sie nach (gut, das ist es, was ich tun würde, sowieso):

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link  href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link  href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
      <?php
        require "connect.php"; //connect to your database
        $select = "
          SELECT topicname
          FROM topics
          ORDER BY topicname
        ";
        $query = mysqli_query($link, $select);
        if(!$query) die("Error: " . mysqli_error($link) . "\nMySQL: " . $select); //for trouble shooting purposes
        while($array = mysqli_fetch_array($query)){
          echo '"' . $array['topicname'] . '",';
        }
      ?>
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 <div class="ui-widget">
 <label for="tags">Tags: </label>
 <input id="tags" />
</div>
</body></html>
    InformationsquelleAutor kurdtpage
  2. 0

    Die autocomplete liefert ein Beispiel: http://jqueryui.com/autocomplete/#remote-jsonp

    $( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    • Das ist keine Datenbank (MYSQL) oder überhaupt erwähnt?
    InformationsquelleAutor Dávid Szabó
  3. 0

    Können Sie nicht verbinden Sie direkt von Javascript aus auf MySQL. Sie benötigen einen php-Datei-jsp-Datei oder ähnliches, das holt die Ergebnisse aus der Datenbank und gibt Sie zurück, die Autovervollständigung. Blick auf http://www.htmlblog.us/jquery-autocomplete für ein einfaches Beispiel.

    InformationsquelleAutor Johannes Stadler
  4. 0

    Anstatt eine Verbindung zu MySQL über REST-frontend, ich denke, es macht Sinn zu schauen, 3rd-party-Lösung wie http://www.rockitsearch.com. Es hat die grundlegenden AutoVervollständigen-Funktionalität aus der box. Alles, was Sie tun müssen, ist sich zu registrieren, Ihre Daten exportieren und integrieren ein widget auf Ihre Website. Der rest der Arbeit wird automatisch für Sie erledigt.

    InformationsquelleAutor Night Warrier
  5. 0

    Denke ich, dass ein Ajax-Aufruf an ein PHP-script, das zurückgegeben JSON-formatierte Liste der ersten 10 in Anspruch nehmen Antworten, die basierend auf der Suche die Eingabe von text-Wert und die Anzeige von Javascript ( in der Ajax-call-Funktion ) in ein DIV, unterhalb der Suchbox, um die Werte, die auswählbar /anklickbar.

    InformationsquelleAutor Adrian Tanase
Schreibe einen Kommentar