AJAX Autocompleter für mehrere Textboxen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • AJAX Autocompleter für mehrere Textboxen

    Tach zusammen,

    ich wurschtel mich grade in das Thema AJAX rein und habe da noch so meine Probleme.


    das ist momentan meine "eingabe" seite

    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Ajax Auto Suggest</title>

    <
    script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
    <
    script type="text/javascript">
        function 
    lookup(inputString) {
            if(
    inputString.length == 0) {
                
    // Hide the suggestion box.
                
    $('#name1').hide();
            } else {
                $.
    post("rpc.php", {queryString""+inputString+""}, function(data){
                    if(
    data.length >0) {
                        $(
    '#suggestions').show();
                        $(
    '#autoSuggestionsList').html(data);
                    }
                });
            }
        } 
    // lookup
        
        
    function fill(thisValue) {
            $(
    '#name1').val(thisValue);
            $(
    '#vorname1').val(thisValue);
            
    setTimeout("$('#suggestions').hide();"200);
        }
        function 
    fill_2(thisValue) {
            $(
    '#vorname1').val(thisValue);
            
    setTimeout("$('#suggestions').hide();"200);        
        }    
    </
    script>

    <
    style type="text/css">
    <!--
    css here-->
    </
    style>

    </
    head>

    <
    body>


    <
    div>
    <
    form>
    <
    div>
    Type your Name:
    <
    br />
    <
    input type="text" size="30" value="" id="name1" onkeyup="lookup(this.value);" onblur="fill();" />
    <
    input type="text" size="30" value="" id="vorname1" onblur="fill_2();" />
    </
    div>
                
    <
    div class="suggestionsBox" id="suggestions" style="display: none;">
    <
    img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />

    <
    div class="suggestionList" id="autoSuggestionsList">&nbsp;
    </
    div>
    </
    div>
    </
    form>
    </
    div>

    </
    body>
    </
    html
    und das ist die php-seite mit der datenbankverbindung


    PHP-Code:
        $db = new mysqli('localhost''root' ,'**********''*********');
        
        if(!
    $db) {
            echo 
    'ERROR: Could not connect to the database.';
        } else {
            if(isset(
    $_POST['queryString'])) {
                
    $queryString $db->real_escape_string($_POST['queryString']);                
                if(
    strlen($queryString) >0) {            
                    
    $query $db->query("SELECT * FROM meldungen1 WHERE name1 LIKE '$queryString%' LIMIT 10");
                    if(
    $query) {        
                        while (
    $result $query ->fetch_object()) {                        
                            
                             echo 
    '<li onClick="    fill(\''.$result->name1.'\');
                                                 fill_2(\''
    .$result->vorname1.'\');
                                 
                                                 
                                   ">'
    .$result->name1.', '.$result->vorname1.'</li>';
                         }
                    } else {
                        echo 
    'ERROR: There was a problem with the query.';
                    }
                } else {
            } else {
                echo 
    'There should be no direct access to this script!';
            }
        } 

    die werte kommen auch alle richtig raus und werden in die beiden felder übernommen.

    aber ich würde das gerne eleganter lösen als fill(); fill_2(); etc....

    kann mir da jemand mal auf die sprüunge helfen???

  • #2
    Hmmm...ich kann dir jetzt keinen fertigen Code liefern, aber ich würds mal so versuchen:

    Die Liste genauso füllen, wie du es jetzt tust. Aber ohne Events, sondern nur mit einer Klasse versehen und mit Name, Vorname füllen:

    PHP-Code:
    echo '<li class="suggest">'.$result->name1.', '.$result->vorname1.'</li>'
    Im Javascript würde auf diese Klasse selektieren, den onklick-Event abfangen und den Inhalt des LI-Elements über das Komma splitten:

    PHP-Code:
    $(".suggest").click(function(){
      var 
    temp this.html().split(", ");
      $(
    "#name").val(temp[0]);
      $(
    "#vorname").val(temp[1]);
       
    setTimeout("$('#suggestions').hide();"200);
    }); 
    Ungestestet, aber das Prinzip dürfte einleuchten.

    Kommentar


    • #3
      PS:

      PHP-Code:
      $(".suggest").css("cursor","pointer"); 

      Kommentar

      Lädt...
      X