1

I am having issues getting this JQuery AJAX to show on the web page.

$(document).ready(function(e) {
    $(".autocomp").autocomplete(
         {
             source: function( request, response ) {
                         $.ajax({
                              url: "/apples",
                              dataType: "json",
                              data: {
                                 srch:request.term
                              },
                              success: function( data ) {
                                   response( $.map( data.result, function( item ) {
                                       return {
                                          label: item.name,    
                                          value: item.name,
                                          data: item
                                        };
                                    }));
                               }
                          });
                     },
                     minLength: 2,
                     select: function(event, ui){
                                  var parts = this.name.match(/(\D+)(\d+)$/);
                                  $("key_"+parts[2]).val(ui.item.data.key);
                               }
                    }); 
});

The function calls a website that returns the information: {result: [{name:macintosh,key:1},{name:golden,key:2},{name:fuji,key:3}]}. The Object sent back in the data field is:

Object {result= [Object{name:macintosh,key:1},Object{name:golden,key:2},Object{name:fuji,key:3}]}

The HTML:

<input type="text" name="name_1" id="name_1" class="autocomp"><input type="hidden" name="key_1" id="key_1">

Anyone have an idea why it is not working? I am importing 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

and the style sheet:

<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

Any help would be greatly appreciated!

4

1 に答える 1

0

This solution is from the WebTuts site. it works now, but it does not use the AJAX call - which I would still LOVE to know how to do. It is a solution and gets the same result done, but does not explicitly answer the question of how to use AJAX with it. Replace the $.ajax section with this seciton.

$.getJSON("/apples?srch="+request.term,request,
                        function(data){
                            var names = [];
                            $.each(data.result, function(i, val){
                                names.push({
                                    label: val.name,
                                    value: val.name,
                                    data: val
                                });
                            });
                            response(names);
                        });

Thanks all! Jon

于 2013-03-26T00:27:42.173 に答える