Jquery: sending additional parameters with autocomplete

Question

I created a php that returns JSON to my autocomplete. example: [{"value":"david schuun","id":"120"}]

Now I want to extend the autocomplete function to pass by additional parameters to this php.

$( "#REMOTE" ).autocomplete({
            source: "json.php",
            minLength: 2,
            extraParams: {aus: 'eins'} ,          // this should work like "www.bla.de/json.php?aus=eins   " but it doesn't 
            select: function( event, ui ) {
                log(ui.item.value,ui.item.id);
            }

        });

Testing this via URL works fine. The PHP script is ok. But I don't know why the Jquery thing doesn't work.

Ok, here is the whole script:

<script>
$(document).ready(
function() {



//this functions reads every hidden field (form the added items) an puts the array as string to a hidden field      
function lesen(){
            var itemsarray = [];
          $(".nutzerid").each(function () {
           var items = $(this).attr('value');
           itemsarray.push(items);
          });
          $( "#ausschluss" ).val(itemsarray);

          };


    //this function attaches the selection (from the autocomplete) to a table it creates text, a hidden field with the user id and a button
        function log( name, id ) {
            $("<tr> <td>"  + name + "<input class='Entf' type='button' value ='Entfernen' />" + "<input type='hidden' class='nutzerid' name='hiddenField' value='" + id + "' /></td></tr>").appendTo("#log");
            $( "#log" ).attr( "scrollTop", 0 );
            lesen();

                   }
//this is the autocompletepart
        $( "#REMOTE" ).autocomplete({
            source: "json.php?aus=" + $( "#ausschluss" ).val(), //this is not working. the firebug console shows an empty param (.php?aus=&term=blabla
            minLength: 2,
            select: function( event, ui ) {
                log(ui.item.value,ui.item.id);          
                alert($( "#ausschluss" ).val());  //this works! after selecting an item from the autocomplete it shows me the value of the field "ausschluss", like it should be appended to the source
                }

        });

//this one captures the click of a button. identified by the class and kills the <tr> <td> and all elemtns in it        
$('.Entf').live('click',function(event){
     $(this).parent().parent().remove();
     lesen();
   });




    });
    </script>

Any hints? I realy don't know, why it works with alert, but not with attahcing to the source.

I'm realy confused about this problem. I'm not a JS pro. But I can't understand why this thing doent't work!!!!!!!

Daniel · Accepted Answer · 2011-03-30 22:58:18Z

1

You could just put the extra parameters directly in the "source". This may not be the cleanest solution, but it should work.

$( "#REMOTE" ).autocomplete({
    source: "json.php?aus=eins",
    minLength: 2,
    select: function( event, ui ) {
        log(ui.item.value,ui.item.id);
    }
});

On another note, the plugin you seem to be using is deprecated, according to its creator

Note (2010-06-23): This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI

So I would recommend grabbing Jquery UI autocomplete

UPDATE: (updating answer to include new requirements)

So if this is the HTML we have:

<input id="REMOTE" />
<input id="ausschluss" type="hidden" value="test" />

This is the javascript we would need:

$(function() {
    $( "#REMOTE" ).autocomplete({
        source: "json.php?aus=" + $( "#ausschluss" ).val(),
        minLength: 2,
        select: function( event, ui ) {
            log(ui.item.value,ui.item.id);
        }
   });
});

Here is a fiddle that shows that the javascript part works: http://jsfiddle.net/43Cur/

If you look at firebug console, you can see that the requested address has the correct parameters set (json.php?aus=test&term=dd)

edited Mar 30, 2011 at 22:58

answered Mar 30, 2011 at 21:50

Daniel

7044 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

brill Over a year ago

This is from JqueryUI. I'm just using latest Jquery and UI.

brill Over a year ago

I tired this and it works. But "aus" should come from a hidden field --- source: "json.php?aus=" + $( "#ausschluss" ).val() ---- but this also doesn't work. i don't know why. this works fine when I alert it. I'm going mad with this thing!

Daniel Over a year ago

I just tested this, and it works fine even with the hidden field, exactly as you wrote it in the comment. Are you sure you are calling the autocomplete() after the document is ready and that you spelled the ID of the hidden input correctly (ausschluss)? The only reason I can think of that would make this fail is if $( "#ausschluss" ).val() returns an empty string because DOM wan't ready or Jquery couldn't find the element

brill Over a year ago

I also tried to put the string into a variable first. and then attach the var. Bur no chance. If I declare the var (var test= 'test') it works. But If I fill the var with the string. And then read the var an attach it to the source. The param is still empty.

Dan Csharpster · Accepted Answer · 2011-12-22 17:11:59Z

You could also use a JSON call as your datasource and build your parameters that way. I started doing that, but I think I may go the first route of just building the source url via javascript and passing that. This example is from the jquery ui samples page: http://jqueryui.com/demos/autocomplete/#remote-jsonp

        $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });

JiDai · Accepted Answer · 2011-03-30 21:37:35Z

0

Did you try this ?

$( "#REMOTE" ).autocomplete({
        source: "json.php",
        minLength: 2,
        data: {aus: 'eins'} ,          // this should work like "www.bla.de/json.php?aus=eins   " but it doesn't 
        select: function( event, ui ) {
            log(ui.item.value,ui.item.id);
        }

    });

answered Mar 30, 2011 at 21:37

JiDai

1362 gold badges3 silver badges11 bronze badges

1 Comment

brill Over a year ago

Yes, I tried it with: data / param / params / extraparams but no success

Collectives™ on Stack Overflow

Jquery: sending additional parameters with autocomplete

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related