jQuery自動完成使用一件事來匹配，然後填寫表格的其餘部分

Question

我一直在試圖讓自動完成工作使用jQuery。 jsFiddle of example我的代碼似乎驗證正確 - 任何想法爲什麼它不工作？

$("#producername").autocomplete({ 
    source: [{ 
    "label": "Acme Producer", 
    "value": { 
     "name": "Acme Producer", 
     "address": "555 Spruce St\nNew City, NY 55555", 
     "phonenumber": "215-555-5555", 
     "key": "Test Key" 
    } 
    }], 
    select: function (event, ui) { 
    $("#producername").val(ui.item.name); 
    $("#phonenumber").val(ui.item.phonenumber); 
    $("#address").val(ui.item.address); 
    $("#producerkey").val(ui.item.key); 
    }, 
    minLength: 1 
}); 

HTML：

<table align="center"> 
    <tr> 
    <th>Name</th> 
    <td colspan> 
     <input type="text" name="producername" id="producername" class="name" 
     value="" /> 
    </td> 
    <th>Phone Number</th> 
    <td> 
     <input type="text" name="phonenumber" id="phonenumber" class="phone" value="" 
     /> 
    </td> 
    </tr> 
    <tr> 
    <th>Address</th> 
    <td colspan="3"> 
     <textarea name="address" id="address" class="name" rows="5" style="width:90%"></textarea> 
     <input type="hidden" name="producerkey" id="producerkey" value="" 
     /> 
    </td> 
    </tr> 
</table> 

任何幫助將不勝感激！

Answer 1

你沒有參考JS小提琴中的jQuery UI庫（管理資源）。檢查一下，你非常接近。

value屬性被自動設置爲文本框的值，該值是自動完成（能夠）

JSFIDDLE

$("#producername").autocomplete({ 
    source: [{ 
    "label": "Acme Producer", 
    "value": "Acme Producer", 
    "data": { 
     "name": "Acme Producer", 
     "address": "555 Spruce St\nNew City, NY 55555", 
     "phonenumber": "215-555-5555", 
     "key": "Test Key" 
    } 
    }], 
    select: function (event, ui) { 
    console.log(ui.item) 
    $("#producername").val(ui.item.data.name); 
    $("#phonenumber").val(ui.item.data.phonenumber); 
    $("#address").val(ui.item.data.address); 
    $("#producerkey").val(ui.item.data.key); 
    }, 
    minLength: 1 
});