0

内容： 我想创建一个自动完成功能，管理员可以在其中从下拉列表中选择一个用户。
另外，我想在我的页面上显示所选用户的 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

感谢您的回答！

4

2 回答 2

3

您需要使用具有属性label和value. 来源。

于 2012-10-22T21:12:39.970 回答
2

试试这个jsFiddle 例子

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);
    }
});​
于 2012-10-22T21:26:15.463 回答