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

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

1 个答案: