Question

我有一个mysql数据库，我想使用自动完成的数据库。到目前为止，我能够收到查询的结果。例如，这是结果：[{"LNAME":"Napoleon","id":"1"}] 但我希望在这种情况下客户的id填写在我表单的另一个输入字段中。（所以在拿破仑的情况下，我希望＆＃34; 1＆＃34;填写到表格的clienteID字段中）目前该领域尚未更新。

以下是HTML部分：

    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

<script>
$(document).ready(function(){
 $("#tag").autocomplete("autocomplete.php", {
        minLength: 3,
        select: function(event, ui) {
            $('#clienteId').val(ui.item.id);            
                 },
    });
});
</script>

<form name='form_update_details' id='form_update_details' method='post' action=''>
<input type='text' name='clienteName' id='tag'>
<input type='text' name='clienteId' id='clienteId'>
</form>

然后是php部分：

<?php

include("include/db.php");

    $q=$_GET['q'];
    $my_data=mysql_real_escape_string($q);

    $sql="SELECT ID, CONTACTS_LNAME, CONTACTS_FNAME FROM CRM_CONTACTS WHERE CONTACTS_LNAME LIKE '%$my_data%' or CONTACTS_FNAME LIKE '%$my_data%' ORDER BY CONTACTS_LNAME";
    $result = mysqli_query($coni,$sql) or die(mysqli_error());

    if($result)
    {
        while($row=mysqli_fetch_array($result))
        {
            $data[] = array(
                'LNAME' => $row['CONTACTS_LNAME'],
                'id' => $row['ID']
        );
        }
        echo json_encode($data);
        flush();
    }
?>

Answer 1

尝试使用示例数据：使用label和value作为键，而不是LNAME和id。使用event.preventDefault();设置label in #tag字段，否则设置为default it will set the value。

var data = [
        {
            value: "1",
            label: "jQuery"
        },
        {
            value: "2",
            label: "jQuery UI"
        },
        {
            value: "3",
            label: "Sizzle JS"
        }
    ];

$(document).ready(function(){
 $("#tag").autocomplete( {
        source: data,
        minLength: 3,
        select: function(event, ui) {
            event.preventDefault();
            $("#tag").val(ui.item.label);
            $('#clienteId').val(ui.item.value);            
            }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<form name='form_update_details' id='form_update_details' method='post' action=''>
<input type='text' name='clienteName' id='tag'>
<input type='text' name='clienteId' id='clienteId'>
</form>

Answer 2

试试这个：

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

HTML：

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

Demo Fiddle

JQUERY autocomplete获取id而不是value

2 个答案: