JQuery UI Автозаполнение дополнительных параметров и автозаполнение - разочарованное решение

Question

Изучил автозаполнение пользовательского интерфейса Jquery (v1.8.5) и понял, что отсутствует серьезная документация по отправке дополнительных параметров и съемке дополнительных данных для автозаполнения других полей. То, что у меня работает, но если серьезно, похоже на такой взлом ... Есть мысли о том, как это улучшить?

        <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 script
                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

Вы можете использовать свойство источника.Установите функцию вместо 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 2

Общая идея выглядит хорошо для меня. Ваш код очень похож на пользовательские данные jQueryUI и показывает демонстрацию .

Есть несколько вещей, которые вы могли бы улучшить, хотя:

1. // doing "$(this)" here fails как внутри объекта параметров для автозаполнения, так и для вашего вызова AJAX, потому что this в JavaScript не имеет смысла в литералах объекта; он содержит контекст вызова функции (см. в этом вопросе для лучшего объяснения this);
2. Внутри функции source, this работает, потому что теперь есть функция вокруг нее. this имеет контекст.

3. Вместо:

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

   Вы можете написать:

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

   Это потому, что this в данном случае уже является объектом jQuery. $(this) является избыточным. Кроме того, свойство element также является объектом jQuery, поэтому вы можете просто получить доступ к id, используя attr()

Остальное выглядит хорошо для меня. Взгляните на демонстрацию, на которую я ссылался - она ​​делает нечто похожее на то, что вы пытаетесь достичь.

Answer 3

Я действительно хотел сделать это в рельсах 3.1, используя coffeescript. Вот сущность для него на github