在从动态附加的li列表中选择时，将选定的li文本附加到输入中，并使用jquery清除列表

Question

This is my form

    <form action="jqry.php" method="post">
      <input class="name" name="name" type="text" id="name">
      <input name="submit" type="submit" value="submit" />
    </form>
    <ul id="display_results"></ul>

This is my js code

     $(function(){
       $("#name").keyup(function() {
       var uname = $(this).val();
       var dataString = 'uname='+ uname;
         if(uname!='') {
            $.ajax({ 
              type: "POST",
              url: "examplesearch.php",
              data: dataString,
              cache: false,
              success: function(html) {
                alert(html);
              $("#display_results").html(html);
              }
            });
            }
           return false;
           });
         });

Here comes the fetching data from database and returning the value

      <?php
        $dbhost = "localhost";
        $dbuser = "root";
        $dbpass = "";
        $dbname= "userdata";
        $conn = mysql_connect($dbhost, $dbuser, $dbpass);
        mysql_select_db($dbname) or die ('<META HTTP-EQUIV="Refresh"   CONTENT="0;URL=Failed.php?dberror=1">');    

        $token = mysql_escape_string($_POST['uname']); 

        $query = "SELECT user_name FROM users WHERE user_name LIKE '%$token%'";
        $result = mysql_query($query) or die(mysql_error());
        $string="";

         if (mysql_num_rows($result)){
            while($row = mysql_fetch_assoc($result)){
            $string .= "<li>".$row['user_name']."</li>";
           }
         }else{
             $string = "No matches found!";
         }
             echo $string;
        ?>

onkeyup the user_names are displayed dynamically. The problem is that I am not able to perform onclick on dynamically updated list. Also when I click on one li, the text of that li must be appended to input value with id=name and the ul must clear. the ul list must be displayed only when keyup is performed on input tag with id=name

Answer 1

Use event delegation for the dynamic li , just target the static container:

$("#display_results").on("click", "li", function() {
    $("#name").val($(this).text());
    //Do ajax
});