Coffee Script自动完成功能，带有jQuery，JSON和id变量

Question

I'm a bit stuck here and can't seem to get jQuery autocomplete to work for me. I'm trying to autocomplete from a JSON document pull.

IE:

http://REMOTE_HOST/names.json

Which returs something like:

[{"label":"Brian House", "id" : 1},
{"label":"Joe Green", "id" : 2},
{"label":"Fisher Gennings", "id" : 3},
{"label":"Sheila Williams", "id" : 4},
{"label":"Brett Nelson", "id" : 5},
{"label":"Angie Katz", "id" : 6},
{"label":"Zoe Middleton", "id" : 7},
{"label":"Parker Jones", "id" : 9}]

What I want to do is have the label autocomplete in a text field (user_friend_name) then populate a hidden field (user_friend_name_id) with the id.

#user_friend_name
#user_friend_name_id

Coffee script I'm currently using.

$(document).ready ->
        $('#user_friend_name').autocomplete
                source: "http://REMOTE_HOST/names.json"
                select: (event,ui) -> $("user_friend_name_id").val(ui.item.id)

Right now it looks like I get one JSON pull of all the names but no selection or filetering as you type. Using just a standard array ['foo', 'food', 'trees'] as the source seems to work fine.

Answer 1

Assuming your data is being returned as you showed above, then ui.item.id is the correct property to access.

I made a fiddle of your example. Try playing with console.log() and console.dir() to debug properties.

http://jsfiddle.net/fMWqU/

If you're still not having luck, then the problem may be your json document. Make sure the document is on the same domain as your script to prevent cross-origin errors. I've also noticed in the past that a json document with Windows line endings cause some browsers to fail. Try doing a regular $.ajax() and use console.dir() in the done() and fail() handlers.

xhr = $.ajax
  url : 'http://REMOTE_HOST/names.json'
  dataType : 'json'

xhr.done ->
  console.log arguments

xhr.fail ->
  console.log 'Fail! ', arguments

Answer 2

I believe they should have value not id properties. I'm not familiar with coffee script but I'm sure this is legible:

$.getJSON("http://REMOTE_HOST/names.json", function(response) {
    var newData = response.map(function(el) { return {label: el.label, value: el.id })
    $('#user_friend_name').autocomplete
        source: "http://REMOTE_HOST/names.json"
        select: (event,ui) -> $("user_friend_name_id").val(ui.item.value)
})