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

Question

我正在为我的表单创建一个自动完成字段。 我正在使用 Codigniter 。 我的观点是在运行时为产品条目提供一个文本字段。

 <!-- 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 -->

下面是我的控制器，它响应来自数据库的一些数据匹配。 以<li> 项目返回。

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;    
}

这是我在输入框中输入输入时调用的模型函数。

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

我正在使用以下 jquery 代码。

$(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");
});

现在我的问题是我的所有代码都能正常工作，但我无法从控制器返回的下拉列表中选择一个值。即使它不可点击。谁能帮忙

Answer 1

尝试改变

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

到

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