单击时如何使div的<li>进入输入框？

Question

i am making an auto complete field for my form . i am using Codigniter . my view is when run Provide a Text field for Entry of Products.

 <!-- Product AutoComplete Field -->
    <div class="form-group">
    <div class="col-md-12">
    <div class="form-group row">

    <div class="col-md-offset-2 col-md-2">     
      <label for="product" class="control-label sr_only"><?php echo lang('product_label'); ?></label>
      <?php echo form_input($productfield);?>
      <div id="category-suggestions">
        <div class="suggestions" id="category-autoSuggestionsList">    

        </div>
        <span class="help-block autocomplete"></span> 
      </div>
      <?php echo form_error('product'); ?>
    </div>
    <!-- Product Field closed -->

below is my controller it's response with some data matches from database. that are return as <li> items.

function autocomplete() {
    $this->load->model('products_model', 'product');
    $query= $this->product->entries();

    foreach($query->result() as $row):
        echo "<li title='" . $row->name . "'>" . $row->name . "</li>";
    endforeach;    
}

and this is my model function called when an input is given in the Input box.

function entries() {
      $this->db->select('name');
      $this->db->like('name', $this->input->post('queryString'), 'both'); 
      return $this->db->get('tblproducts', 10);  
 }

I am using the following jquery Code.

$(document).ready(function() {

 var item1 = '#category-suggestions';
 var item2 = '#product';
 var item3 = '#category-autoSuggestionsList';

 $(item1).hide();

 function lookup(fieldSuggestions, fieldSuggestionsList, inputString) {
      if(inputString.length == 0) {
           $(fieldSuggestions).hide();
      } else {
           $.post('http://localhost/CMS/index.php/invoice/autocomplete', 
           {queryString: ""+inputString+""}, 
           function(data){
                if(data.length >0) {
                     $(fieldSuggestions).show();
                     $(fieldSuggestionsList).html(data);
                }
        });
      }
 }

 function fill(fieldId, fieldSuggestions, thisValue) {
      $(fieldId).val(thisValue);
      setTimeout("$('" + fieldSuggestions + "').hide();", 200);
 }

 $(item2).keyup(function() {
      lookup(item1, item3, $(item2).val());
 });

 $(item3 + " li").live('click', function() { 
      fill(item2, item1, $(this).attr('title'));         
 });

  // alert("hey");
});

now my problem is my all code works correctly but i am unable to select a value from the drop down list return by controller. Even it's not clickable. Can any one help

Answer 1

try changing

$(item3 + " li").live('click', function() { 
    fill(item2, item1, $(this).attr('title'));         
});

to

$(document).on('click',item3 + " li", function() { 
    fill(item2, item1, $(this).attr('title'));         
});