我如何使用自动完成 jquery 放置隐藏的 id答案

【问题标题】：How can i put hidden id with autocomplete jquery我如何使用自动完成 jquery 放置隐藏的 id
【发布时间】：2016-04-04 00:30:06
【问题描述】：

我想在从自动完成获取值以添加到数据库时隐藏 id，但现在当我从自动完成获取值并添加到数据库时，它的添加值是标签名称而不是数据的 id

<input type='text' id='id' name='id' class='id_line' placeholder='Item Code'/>

这是我的 jquery 代码

$("#add_line").on('click',function(){

            $('.tbl_add_line').append(data);
            $('.id_line').autocomplete({
                source: function (request, response){
                    $.ajax({
                        url : "<?php echo site_url('warehouse/get_id');?>",
                        dataType: "jsonp",
                        data : {
                            q: request.term
                        },
                        success: function( data ) {
                            response(data);
                        }
                        });
                },
            });
            i++;
        });

这是获取数据以自动完成显示的功能

function get_id(){

         $result = "";
         if(isset($_GET['q'])){ 
            $code = $_GET['q'];
            $this->db->like("item_code",$code)->select('*'); 
            $this->db->order_by("item_code");
            $result = $this->db->from("tbl_item_code")->get()->result();
         }
         $arr = array();
         foreach($result as $key){
            $arr[] = array( 
                'id' => $key->id,
                'value' => $key->id,
                'label' => $key->item_code."(".$key->id.")",

            );
         }
         echo $_GET['callback']."(".json_encode($arr).")";


}

【问题讨论】：

标签： javascript jquery codeigniter autocomplete

【解决方案1】：

您可以使用_renderItem 方法将custom attributes 添加到创建的元素中。

试试这个：

$(function() {
  var projects = [{
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"
  }, {
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"
  }, {
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png"
  }];

  $("#project").autocomplete({
      minLength: 0,
      source: projects,
      focus: function(event, ui) {
        $("#project").val(ui.item.label);
        return false;
      },
      select: function(event, ui) {
        $("#project").val(ui.item.label);
        $("#project-id").val(ui.item.value);
        $("#project-description").html(ui.item.desc);
        return false;
      }
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .append("<a>" + item.label + "<br>" + item.desc + "</a>")
        .appendTo(ul);
    };
});

    #project-label {
      display: block;
      font-weight: bold;
      margin-bottom: 1em;
    }
    #project-icon {
      float: left;
      height: 32px;
      width: 32px;
    }
    #project-description {
      margin: 0;
      p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<div id="project-label">
  Select a project (type "j" for a start):</div>
<input id="project">
<input type="text" id="project-id" disabled>
<p id="project-description"></p>

Fiddle here

【讨论】：