CODEWITHSUNDEEP
javascriptjqueryautocomplete
PRDeving
PRDeving

Reputation: 669

Autocomplete from object with JQuery

I'm trying to build a web-app and I need one textfield with autocomplete, but I'm trying and it doesn't work. The problem is I need autocomplete from a js object (builded with Json).

My object looks like this:

    prod = {
"1":["1","alpargatas","asdf","1","10.5","2"],
"2":["2","volcom","adfw","2","40","5"],
"3":["3","botas","afafew","1","30","12"],
"4":["4","tenis","qrfqr ","1","40","9"]
};

And my script's like this:

<input id="v1_busqueda_in"/>

$(function() {

$( "#v1_busqueda_in" ).autocomplete(
{
    source:data,
    select: function( event, ui ) {
        $( "#v1_busqueda_in" ).val( ui.item[0] + " / " + ui.item[1] );
        return false;
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a><strong>" + item[0] + "</strong> / " + item[1] + "</a>" )
        .appendTo( ul );
    };      

});

I'm getting the values using sentences like prod[2][0], but I dont know how I can autocomplete with the second variable and take the first as a selected (ex: write a, autocomp. alpargatas, js takes 1)

I need some help, thanks ;)

Upvotes: 0

Views: 572

Answers (1)

jason
jason

Reputation: 879

  <!doctype html>
  <html lang="en">
   <head>
  <meta charset="utf-8">
      <title>jQuery UI Autocomplete - Custom data and display</title>
    <link rel="stylesheet"   href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   <link rel="stylesheet" href="/resources/demos/style.css" />


 <style>
     #project-label {
     display: block;
     font-weight: bold;
     margin-bottom: 1em;
     }
     #project-icon {
     float: left;
     height: 32px;
     width: 32px;
     }
     #project-description {
     margin: 0;
     padding: 0;
     }
  </style>
  <script>

        $(function() {
       var projects = [
         {
           value: "jquery",
           label: "jQuery",
           desc: "the write less, do more, JavaScript library",
           icon: "jquery_32x32.png"
         },
         {
           value: "jquery-ui",
           label: "jQuery UI",
           desc: "the official user interface library for jQuery",
           icon: "jqueryui_32x32.png"
         },
         {
           value: "sizzlejs",
           label: "Sizzle JS",
           desc: "a pure-JavaScript CSS selector engine",
           icon: "sizzlejs_32x32.png"
           }
         ];

       $( "#project" ).autocomplete({
         minLength: 0,
         source: projects,
         focus: function( event, ui ) {
           $( "#project" ).val( ui.item.label );
           return false;
         },
         select: function( event, ui ) {
           $( "#project" ).val( ui.item.label );
           $( "#project-id" ).val( ui.item.value );
           $( "#project-description" ).html( ui.item.desc );
           $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

           return false;
         }
       })
       .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
         return $( "<li>" )
           .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
           .appendTo( ul );
       };
     });
  </script>

Select a project (type "j" for a start):

Upvotes: 1

Related Questions