Jquery UI空白自動完成

什麼是： 我想創建一個自動完成，其中管理員可以從下拉列表中選擇一個用戶。
另外，我想我的網頁上顯示所選用戶的ID。Jquery UI空白自動完成

問題：我得到的問題是空白下拉自動填充字段，我不知道如何解決這個問題。此外，該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

感謝您的一nswers！

來源

2012-10-22 intelis

當使用對象作爲源的數組，你需要的屬性'label'和'value'，不'id'和'name'。 http://api.jqueryui.com/autocomplete/#option-source – j08691

謝謝，現在的下拉工作，但該值在輸入欄顯示。它如何在span元素中顯示它？謝謝 – intelis

試試這個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); 
    } 
});

來源

2012-10-22 21:26:15 j08691

謝謝你，這個伎倆！ :) – intelis

您需要使用帶屬性label和value對象。 Source。

來源

2012-10-22 21:12:39 mayhewr

Jquery UI空白自動完成

回答

相關問題