JQuery UI Autocomplete Advanced Options and Autocomplete - Upset Solution

Question

Having looked at the JQuery UI autocomplete (v1.8.5) and realized that there was a lack of documentation on sending additional parameters and capturing additional data to autocomplete other fields. I have work, but seriously, it seems like such a hack ... Any thoughts on how to improve this?

        <script type="text/javascript">

        var optofirst = {

            width: 375,

            // doing "$(this)" here fails

            source: function( request, response ) {

            // grab the calling element
            // "$(this)" here works but ya gotta dig to get to the ID

            var cat = $(this);
            var callid = cat[0].element.context.id; //digging away

            $.ajax({

                // doing "$(this)" here fails

                url: "automagic.php",
                dataType: "json",
                data: {
                term : request.term,

                //send its ID to the PHP 
                grab : callid,
            },

            success: function( data ) {
                response( $.map( data, function( item ) {
                return {

                // start assigning item handles to the response

                label: item.first,
                value: item.first,
                last: item.last,
                }
                }));
            }
            });
        },
            select: function( event, ui ) {
                console.log( ui.item ?
                "Selected: " + ui.item.last :
                "Nothing selected, input was " + this.value);

                // make #lname have the value last name
                // the "item" in this case appears to get its info from the handles assign in "success:"

                $("#flyover #lname").attr("value",ui.item.last);
            },
        minLength: 2,
        };

        $("#flyover #fname").autocomplete(optofirst);

        </script>

Answer 1

The general idea looks good to me. Your code is pretty close to jQueryUI user data and demo demos .

There are a few things you could improve, but:

• // doing "$(this)" here fails , AJAX, this JavaScript ; (. this);
• source this, . this .

• :

  var callid = cat[0].element.context.id; //digging away
  

  :

  var calid = this.element.attr('id');
  

  , this jQuery. $(this) . , element jQuery, id, attr()

. , , - ​​ , .

Answer 2

source. url. URL- customData , . :

        $(this).autocomplete({
            source: function(request, response) {
                $.ajax({
                  url: 'data.php',
                  dataType: "json",
                  data: {
                    term : request.term,
                    customData : $('#something').val()
                  },
                  success: function(data) {
                    response(data);
                  }
                });
            },
            minLength: 3}, {

        }); 

Answer 3

I really wanted to do this in rails 3.1 using coffeescript Heres a gist for it on github