Question

什么： 我想创建一个自动填充功能，管理员可以从下拉列表中选择一个用户另外，我想在我的页面上显示所选用户的ID。

问题：我遇到的问题是空白下拉列表自动填充字段，我不知道如何解决这个问题。 ID也没有更新。

代码

使用Javascript：

// Values
var names = [
    {
    id: 1,
    name: 'Max'},
{
    id: 2,
    name: 'John'},
{
    id: 3,
    name: 'Gray'},
{
    id: 4,
    name: 'Bob'},
{
    id: 5,
    name: 'Terminator'}
];

// Autocomplete start..
$('#suggested-users').autocomplete({
    source: names,
    select: function() {
        $('#user-id').html(ui.item.id);
    }
});

HTML：

<html>

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
    </head>

    <body>
        <input type="text" id="suggested-users">
        <hr>
        <p><strong>ID:</strong><span id="user-id"></span></p>
    </body>

</html>

JSFiddle： JSFiddle

感谢您的回答！

Answer 1

您需要使用属性为label和value的对象。 Source

Answer 2

试试 jsFiddle example

var opt;
// Values
var names = [
    {
    label: 'Max',
    value: 1},
{
    label: 'John',
    value: 2},
{
    label: 'Gray',
    value: 3},
{
    label: 'Bob',
    value: 4},
{
    label: 'Terminator',
    value: 5}
];

// Autocomplete start..
$('#suggested-users').autocomplete({
    source: names,
    select: function(e, ui) {
        $('#user-id').html(ui.item.value);
        opt = ui.item.label;
    },
    close: function() {
        $('#suggested-users').val(opt);
    }
});

Jquery UI空白自动完成

2 个答案: