Question

我使用自动完成查询选择状态。在我的数据库中，我需要存储状态ID而不是状态名称。如何将自动完成选定值相应的id传递给输入

的数据属性

$(document).ready(function() {

    src = "{{ url('searchajax') }}";
     $(".searchledger").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    term : request.term
                },
                success: function(data) {
                    response(data);                   
                }
            });
        },
        minLength: 1,

    });

});

Answer 1

尝试这样的事情：

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Custom data and display</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-icon {
    float: left;
    height: 32px;
    width: 32px;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var projects = [
        {
            value: "1",
            label: "jQuery"
        },
        {
            value: "2",
            label: "jQuery UI"
        },
        {
            value: "3",
            label: "Sizzle JS"
        }
    ];
 
    $( "#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 );
            return false;
        }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "</div>" )
        .appendTo( ul );
    };
  } );
  </script>
</head>
<body>
 
<div id="project-label">Select a project (type "j" for a start):</div>

<input id="project">

<input type="text" id="project-id">  <!-- make it hidden -->

</body>
</html>

＆＃13;

在从自动填充中选择任何选项后，您将在以下位置获得所选的值ID：

<input type="text" id="project-id">

将其隐藏并获取其值并相应地使用它。

如何将自动完成选择的值id传递给jquery中的data-attribute

1 个答案: