Autocompletar jQuery datos utilizando JSON

Question

Imagine un archivo JSON con los siguientes datos:

[ 
    { 
     color: "red", 
     value: "#f00" 
    }, 
    { 
     color: "green", 
     value: "#0f0" 
    }, 
    { 
     color: "blue", 
     value: "#00f" 
    }, 
    { 
     color: "cyan", 
     value: "#0ff" 
    } 
] 

Utilizando el método de autocompletar de jQuery, yo quiero que sea capaz de mostrar el color como opciones a seleccionar e insertar valor en una entrada.

<input type="text" name="selector" id="selector" /> 

<input type="text" name="color" id="color" /> 
<input type="text" name="value" id="value" /> 

Lo anterior no necesita presentaciones. Selector para la búsqueda en los colores, input.color con color valor y input.value con valor valor.

EDIT: tengo estos datos JSON:

[{ 
    "label": "Sec\u00e7\u00e3o 1", 
    "value": "1" 
}, { 
    "label": "Sec\u00e7\u00e3o 2", 
    "value": "2" 
}, { 
    "label": "Sec\u00e7\u00e3o 3", 
    "value": "3" 
}, { 
    "label": "Sec\u00e7\u00e3o 4", 
    "value": "4" 
}] 

y este código HTML:

<input type="text" id="name" /> 
<input type="text" id="value" /> 

y esto jQuery:

$(document).ready(function(){ 
    $("#name").autocomplete({ 
     source: "json.php", 
     select: function (event, ui) { 
      $("#name").val(ui.label); 
      $("#value").val(ui.value); 
     } 
    }); 
}); 

Seguí respuesta y de Andrew me pide que seleccione los datos, pero si alertar ui.label y ui.value variables, dice 'indefinido'. ¿Qué me estoy perdiendo?

Edit2: Digamos que tengo este código HTML:

<input type="text" class="name" /> 
<input type="text" class="value" /> 

<input type="text" class="name" /> 
<input type="text" class="value" /> 

¿Es posible manejar varios selectores con el mismo método .autocomplete()? Al igual que, seleccione la etiqueta que quiero usando el input.name y solo actualice el input.value al lado?

[input.name] [input.value]
^ selecciono              ^actualiza la
    una etiqueta                       valor próximo a ella
[input.name] [input.value]
^ esto se mantiene intacta^

Answer 1

El uso de una fuente de datos remota:

$("#selector").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "my_server_side_resource.php", 
      type: "GET", 
      data: request, 
      success: function (data) { 
       response($.map(data, function (el) { 
        return { 
         label: el.color, 
         value: el.value 
        }; 
       })); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     // Prevent value from being put in the input: 
     this.value = ui.item.label; 
     // Set the next input's value to the "value" of the item. 
     $(this).next("input").val(ui.item.value); 
     event.preventDefault(); 
    } 
}); 

Tweak la llamada $.ajax según sea necesario. Este ejemplo generará solicitudes a su recurso PHP que se ve así:

my_server_side_resource.php?plazo = xyz

Si usted tiene control sobre el código del lado del servidor, podría cambiar los datos que se volvió a tener este aspecto:

[ 
    { 
     label: "red", 
     value: "#f00" 
    }, /* etc */ 
] 

puede simplemente usar una cadena, el nombre de su de recursos del lado del servidor como el source:

$("#selector").autocomplete({ 
    source: "my_server_side_resource.php", 
    select: /* same as above */ 
}); 

Mira la remote with JSONP example de un ejemplo completo utilizando un recurso en el servidor.

Editar: Ver este ejemplo para una demostración de trabajo utilizando datos locales: http://jsfiddle.net/SMxY6/

Answer 2

necesita cambiar su objeto JSON a utilizar la propiedad "etiqueta". A partir de los documentos:

una matriz de objetos con propiedades de etiqueta y valor: [{label: "Choice1", valor: "valor1"}, ...]

La propiedad de etiqueta se muestra en el menú de sugerencias. El valor se insertará en el elemento de entrada después de que el usuario haya seleccionado algo en el menú. Si solo se especifica una propiedad, se usará para ambos, por ej. si proporciona solo propiedades de valor, el valor también será utilizado como etiqueta.

Luego, debe establecer los valores de los otros campos de texto cuando se activen los eventos "cambiar" o "seleccionar".

Answer 3

Después de horas de trabajo ... Finalmente lo hice realidad. La cosa es que tengo una matriz json que consta de muchos objetos json. Cada objeto json tiene el nombre del banco y su código ifsc. El usuario debe escribir el banco y filtrar la fila de detalle del banco de la base de datos. Al seleccionar ese banco ... Tenía 2 campos de entrada uno para el banco y otro para el código ifsc. Seleccioné el nombre del banco y se muestra el código ifsc correspondiente. Así que esto es cómo lo hice: -

---

<script type="text/javascript"> 
$(function() { 





    $("#newBeneBankName").autocomplete({ 

     source: function(request, response) { 

      $.ajax({ 
       url: "getBankDetailsIFSCJson", 
       type: "GET", 
       data: { 
        term: request.term 
       }, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data, function (el) { 
         return { 
          label: el.label, 
          value: el.value 
         }; 
        })); 
       } 
      }); 
     }, //newBeneBankName addBeneIfscCode 
     focus: function (event, ui) { 
      event.preventDefault(); 
      $("#newBeneBankName").val(ui.item.label); 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      $("#addBeneIfscCode").val(ui.item.value); 
      $("#newBeneBankName").val(ui.item.label); 
     } 

}); 
}); 

---

mi matriz JSON = [{ etiqueta: "State Bank of India", valor: "SBIN00076" } , { etiqueta: "ICICI Bank", valor: "ICIC001" }, .. ]