Livesuche in DB per Javascript

Hallo ich nerve heute noch einmal mit dingen die vllt schon 2000x gefragt wurden.

Ich habe eine Datenbank in der Postleitzahlen für D/A/CH enthalten sind, diese möchte ich nun nach drei kreterien per Livesuche durchsuchen lassen möchte:

Land - Postleitzahl - Umkreis

Hier der Javascriptcode den ich bisher habe:

<script type="text/javascript">  

$(document).ready(function(){

    $('.search-box input[type="text"]').on("keyup input", function(){  

        /* Get input value on change */

        var inputVal = $(this).val();

        var resultDropdown = $(this).siblings(".result");  

        if(inputVal.length){

            $.get("lookup.php", {term: inputVal}).done(function(data){  

                // Display the returned data in browser

                resultDropdown.html(data);

            });

        } else{

            resultDropdown.empty();

        }

    });

    // Set search input value on click of result item

    $(document).on("click", ".result p", function(){  

        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());  

        $(this).parent(".result").empty();  

    });

});

</script>

Wie genau muss ich das Script nun anpassen um diese drei kreterien an meine search.php weiterleiten zu können?

MfG
TheAlex

Please also mark the comments that contributed to the solution of the article

Content-Key: 378190

Url: https://administrator.de/contentid/378190

Printed on: April 26, 2024 at 14:04 o'clock

5 Comments

Latest comment

Ich gehe mal davon aus, dass das nicht von dir geschrieben wurde, denn sonst wüsstest du, wie du diese einfache Anpassung vornimmst.
Nach der Frage mit der MySQL-Tabelle denk ich mir: Im Endeffekt fragst du dich jetzt Codefetzen für Codefetzen durch um für deinen Arbeitgeber etwas zu erschaffen, oder wie ist das? Oder sind es Hausaufgaben?

Ich würde dir raten dich mit den Basics der einzelnen Bereiche zu beschäftigen, bis du es drauf hast. Haben die meisten
hier ebenfalls so gemacht.

Oder du bietest Gegenwert.
Dann wird dir hier vermutlich jeder gerne helfen, mit Auftrag und offiziell und so.

Sorry, nichts für ungut.

Das ganze ist rein Privat. Ich verstehe es leider nur wenn ich einen Code sehe der sich auf meinen fall bezieht.

Wenn mir jemand ohne Fachchinesisch erklären kann wie es funktioniert lerne ich es auch.

Soweit ich das richtig verstehe müsste ich hier:

$.get("lookup.php", {term: inputVal}).done(function(data){

anpassungen vornehemen.

Ich denke in so etwa:

$.get("lookup.php", {term: inputVal}, {term2: inputVal2}, {term3: inputVal3}).done(function(data){  

Allerdings muss ich diese inputs noch deklarieren, wie hier

  var inputVal = $(this).val();

Wie genau müsste ich das dann hier

    <div class="search-box">  

        <input type="text" autocomplete="off" placeholder="Search country..." />  

        <div class="result"></div>  

anpassen?

So bräuchte ich die suchmaske:

    <div class="search-box">  

		<select>
		<option value="AT-">A</option>  
		<option value="CH-">CH</option>  
		<option value="DE-">D</option>  
		</select> 
        
		<input type="text" autocomplete="off" placeholder="PLZ" />  
		
		<input type="number" autocomplete="off" placeholder="Umkreis" />  

        <div class="result"></div>  

    </div>

Hi,

$.get("lookup.php", {term: inputVal}, {term2: inputVal2}, {term3: inputVal3}).done(function(data){  

wäre eher

$.get("lookup.php", {term: inputVal, term2: inputVal2, term3: inputVal3}).done(function(data){  

Und zum Füllen kannst du $(this).val() nicht für alle 3 nehmen. "$(this)" bezieht sich auf das input-type-text-feld innerhalb <div class"search-box">, in welchem getippt (keyup) wird. Das funktioniert so also nicht, da es eine Live-Suche darstellen soll: Jedesmal wenn keyup-event registriert wird, sprich nach jedem getippten Buchstaben, wird das ans Backend gesendet.du solltest deinen Input-Feldern mit id= eine eindeutige Id zuweisen. Dann kannst du mit $('#idBezeichner').val() darauf zugreifen. Deine angepasste Form sieht bis auf fehlende Id's gut aus.

Hoffe das hilft.

Sry bin in JS leider absoluter neuling.

Wie genau müsste ich das Script und meinen HTML code denn jetzt anpassen?

Ich verstehe worauf du hinaus möchtest weiss jedeoch leider nicht genau wie ich es umsetzen soll.

Wäre es dann nicht ratsam erstmal die Basics zu lernen? Wird ja nicht die letzte Anpassung/Neue Funktion sein, die du einbauen willst?
Ausnahmsweise:

<script type="text/javascript">  

$(document).ready(function(){

    $('#plz').on("keyup input", function(){  

        /* Get input value on change */

        var inputPlz = $(this).val();
        var inputZone = $( '#zone option:selected' ).text();  
        var inputUmkreis = $('#umkreis').val();  

        var resultDropdown = $(this).siblings(".result");  

        if(inputPlz.length){

            $.get("lookup.php", {term: inputPlz, term2: inputUmkreis, term3: inputZone }).done(function(data){  

                // Display the returned data in browser

                resultDropdown.html(data);

            });

        } else{

            resultDropdown.empty();

        }

    });

    // Set search input value on click of result item

    $(document).on("click", ".result p", function(){  

        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());  

        $(this).parent(".result").empty();  

    });

});

</script>

<!-- FORM -->
    <div class="search-box">  

		<select id="zone">  
		<option value="AT-">A</option>  
		<option value="CH-">CH</option>  
		<option value="DE-">D</option>  
		</select> 
        
		<input type="text" autocomplete="off" placeholder="PLZ" id="plz" />  
		
		<input type="number" autocomplete="off" placeholder="Umkreis" id="umkreis" />  

        <div class="result"></div>  

    </div>

Damit wird sobald in PLZ getippt wird jedesmal eine Anfrage an lookup.php geschickt wo du dann in $_GET['inputPlz'], $_GET['inputUmkreis'], $_GET['inputZone']
deine Werte findest.

German solved Question JavaScript Development