AJAX Autocompleter für mehrere Textboxen

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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.

    Comment


    • #3
      PS:

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

      Comment

      Working...
      X