it-swarm.com.ru

jQuery Автозаполнение с использованием extraParams для передачи дополнительных переменных GET

Я имею в виду, в частности, плагин jQuery Autocomplete v1.1 от Jörn Zaefferer [source: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] , как представляется, существует довольно много вариантов этого плагина.

Я пытаюсь передать дополнительные параметры на сервер, когда пользователь начинает печатать, потому что у меня есть несколько полей, для которых я хочу, чтобы автозаполнение содержало предложения.

В дополнение к запросу я хочу отправить атрибут входного имени на сервер, но я не могу использовать $ (this) .attr ('name') в extraParams.

Мой JQuery:

   $('.ajax-auto input').autocomplete('search.php', {
     extraParams: {
      search_type: function(){
       return $(this).attr('name');
      }
     }
   })

Это мой HTML.

 <form method="post" action="#" id="update-form" autocomplete="off">
  <ol>
         <li class="ajax-auto">
             <label for="form-initials">Initials</label>
                <input type="text" id="form-initials" name="initials" />
            </li>
         <li class="ajax-auto">
             <label for="form-company">Company</label>
                <input type="text" id="form-company" name="company" />
            </li>
  </ol>
 </form>

Какие-либо предложения?

28
paperclip

Я использую функцию автозаполнения, которая теперь является частью jquery ui . Передача поля extraParams не работает, но вы можете просто добавить значения в строку запроса запроса.

$(document).ready(function() {
    src = 'http://domain.com/index.php';

    // Load the cities straight from the server, passing the country as an extra param
    $("#city_id").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    term : request.term,
                    country_id : $("#country_id").val()
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });
});
46
ramonhimera

Попробуй это:

$('.ajax-auto input').setOptions({
  extraParams: {
    search_type: function(){
      return $(this).attr('name');
    }
  }
})

Смотрите также здесь

4
Nam Le

У меня была похожая проблема ... не знаю, будет ли она работать для вас ....

Я старался 

 $("#awbCusName").autocomplete("getOracleCus.php?",{
  extraParams: {
  ZONE: function() { return $("#awbZone").val(); }, 
  SE: function() { return $("#awbSE").val(); }, 
  WSC: function() { return $("#awbWSC").val(); } 
 },
delay:200,
selectOnly:true,
cacheLength:0,
autoFill:true,
matchSubset:true,
minChars:1
});

CACHELENGTH: 0 сделали свое дело

Спасибо

2
farness

Вы можете использовать встроенное автозаполнение jquery ui следующим образом:

          $(function() {
         $("#BurroughName").autocomplete({
                minLength: 0,
                source: function( request, response) {
                            $.ajax({
                                        url: "/JsonData/GetBurroughFromSearchTermJson",
                                        dataType: "json",
                                        data: {
                                                    term: request.term,
                                                    CityId: $("#CityId").val()
                                        },
                                        success: function( data ) {
                                                    response( data );
                                        }
                            });
                },                  
                select: function( event, ui) {
                    $("#BurroughId").val(ui.item.id);

                    if (ui.item.id != null) {
                         var cityId = $('#CityId').val();
                        $.getJSON("/AdSales/City.mvc/GetCityJSONListFromBrand", { burroughId: ui.item.id }, function(data) {
                             $("#CityId").fillSelect(data);
                             var foo = $("#CityId option[value=" + cityId + "]");
                             if(($("#CityId option[value=" + cityId + "]").length > 0) && cityId != "")
                             {
                                 $("#CityId").val(cityId);
                             }
                        });
                    }
                    $('#burroughSpinner').fadeOut('slow', function(){});
                }
         });
     });

Вот их пример jsonp: http://jqueryui.com/demos/autocomplete/#remote-jsonp

2
Dan Csharpster

Что касается ответа с наибольшим количеством голосов, я думаю, что существует гораздо более простой синтаксис, просто добавив дополнительное значение запроса в исходный URL.

Это:

$("#city_id").autocomplete({
    source: src+"?country_id="+$("#country_id").val().
    min_length: 3,
    delay: 300
});

делает так же, как:

$("#city_id").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                term : request.term,
                country_id : $("#country_id").val()
            },
            success: function(data) {
                response(data);
            }
        });
    },
    min_length: 3,
    delay: 300
});

учитывая, что src является строкой URL.

1
mpaf

Хотя это было не идеально, я взломал/изменил плагин, чтобы он работал на меня. 

Просто я изменил функцию AJAX jQuery внутри плагина.

Вокруг линии 363 вы увидите:

        $.ajax({
            // try to leverage ajaxQueue plugin to abort previous requests
            mode: "abort",
            // limit abortion to this input
            port: "autocomplete" + input.name,
            dataType: options.dataType,
            url: options.url,
            data: $.extend({
                q: lastWord(term),
                search_type: $(input).attr('name'), // my mod to pickup multiple fields
                limit: options.max
            }, extraParams),
            success: function(data) {
                var parsed = options.parse && options.parse(data) || parse(data);
                cache.add(term, parsed);
                success(term, parsed);
            }
        });

Я все еще ищу элегантное решение для этого, поэтому не стесняйтесь, чтобы предложения приходили.

1
paperclip
jQuery( "#jac" ).autocomplete({
    source: autocompleteURL,
    minLength: 2,
    search: function( event, ui ) { 

        // update source url by adding new GET params
        $(this).autocomplete( 'option', 'source', autocompleteURL + 'var1=aaa&var2=bbb' );
    }
})

У меня работает с jquery.ui.autocomplete 1.8.17

1
jszoja

Использование автозаполнения в JQuery 1.7.

Использование сетки данных aspx: мне нужно было запускать автозаполнение для любой выбранной записи, но с другими начальными данными в зависимости от введенного значения. Мне также потребовалось два других поля, которые отображаются в записи в сетке данных, чтобы получить мои данные для автозаполнения .... У всех полей, на которые мне нужно сослаться, есть свое собственное имя класса.

    $(".AutoSearch").autocomplete({
            DateTime: "",
            Maker: "",
            search: function (event, ui) {
                DateTime = $(this).parent().parent().parent().find(".DateTime").text();
                Maker = $(this).parent().parent().parent().find(".Maker").text();
            },
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "AutoList.aspx/GetListOfAutos",
                    data: "{ " +
                        "'DateTime': '" + DateTime + "', " +
                        "'Maker': '" + Maker + "', " +
                        "'SearchSeed': '" + request.term + "', " +
                        "'NumberToRetrieve': '" + 100 + "'" +
                    " }",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.Description,
                                value: item.Number
                            }
                        }));
                    },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("There was an error retrieving the Data.");
                    }
                });
            },
            change: function (event, ui) {
                $(this).parent().parent().parent().parent().parent().parent().css("background-color", "#EEC900");
                $(this).parent().parent().parent().parent().parent().parent().find(".chkReadyExport").find("input:checkbox").prop("checked", false);
            },
            select: function (event, ui) {
                this.value = ui.item.value;
                return false;
            },
            minlength: 6,
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    }

Я добавил два свойства; DateTime и Maker, а затем с помощью поиска: который запускается до запуска источника автозаполнения: я смог получить нужные мне данные из строки, в которой я находился. Это дало мне хороший способ хранить все мои поисковые и дополнительные элементы данных в одном месте.

.Parent (). Parent () и т.д. Объясняется тем, что у меня есть многострочные таблицы для отображения моих данных в виде сетки, и мне нужно пройти вверх по дереву, а затем найти нужное текстовое поле или метку и изменить цвет фона строки с измененными данными. Я не опытен в поиске предметов с помощью jQuery, но, таким образом, parent.parent ... вещь.

1
avoidingwork

У меня была такая же проблема, но, как ни странно, только с уменьшенной версией плагина автозаполнения. Когда я использовал не минимизированную версию, она работает. Я еще не посмотрел минимизированную версию, чтобы увидеть, в чем может быть разница.

0
kinakuta

Попробуй с

$( "#ricerca" ).autocomplete({
                source: "response.php?param=param",
                minLength: 2
});
0
user3189971

Я понимаю, что его ответ уже был. но я надеюсь, что это поможет кому-то в будущем и сэкономит столько времени и боли.

(you can replace 'CRM.$' with '$' or 'jQuery' depending on your jQuery version)

полный код приведен ниже: это я сделал для текстового поля, чтобы сделать его автозаполнением в CiviCRM. Надеюсь, это поможет кому-то

CRM.$( 'input[id^=custom_78]' ).autocomplete({
            autoFill: true,
            select: function (event, ui) {
                    var label = ui.item.label;
                    var value = ui.item.value;
                    // Update subject field to add book year and book product
                    var book_year_value = CRM.$('select[id^=custom_77]  option:selected').text().replace('Book Year ','');
                    //book_year_value.replace('Book Year ','');
                    var subject_value = book_year_value + '/' + ui.item.label;
                    CRM.$('#subject').val(subject_value);
                    CRM.$( 'input[name=product_select_id]' ).val(ui.item.value);
                    CRM.$('input[id^=custom_78]').val(ui.item.label);
                    return false;
            },
            source: function(request, response) {
                CRM.$.ajax({
                    url: productUrl,
                        data: {
                                        'subCategory' : cj('select[id^=custom_77]').val(),
                                        's': request.term,
                                    },
                    beforeSend: function( xhr ) {
                        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                    },

                    success: function(result){
                                result = jQuery.parseJSON( result);
                                //console.log(result);
                                response(CRM.$.map(result, function (val,key) {
                                                         //console.log(key);
                                                         //console.log(val);
                                                         return {
                                                                 label: val,
                                                                 value: key
                                                         };
                                                 }));
                    }
                })
                .done(function( data ) {
                    if ( console && console.log ) {
                     // console.log( "Sample of dataas:", data.slice( 0, 100 ) );
                    }
                });
            }
  });

PHP-код о том, как я возвращаю данные для этого вызова jjery ajax в автозаполнении:

/**
 * This class contains all product related functions that are called using AJAX (jQuery)
 */
class CRM_Civicrmactivitiesproductlink_Page_AJAX {
  static function getProductList() {
        $name   = CRM_Utils_Array::value( 's', $_GET );
    $name   = CRM_Utils_Type::escape( $name, 'String' );
    $limit  = '10';

        $strSearch = "description LIKE '%$name%'";

        $subCategory   = CRM_Utils_Array::value( 'subCategory', $_GET );
    $subCategory   = CRM_Utils_Type::escape( $subCategory, 'String' );

        if (!empty($subCategory))
        {
                $strSearch .= " AND sub_category = ".$subCategory;
        }

        $query = "SELECT id , description as data FROM abc_books WHERE $strSearch";
        $resultArray = array();
        $dao = CRM_Core_DAO::executeQuery( $query );
        while ( $dao->fetch( ) ) {
            $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value
        }
        echo json_encode($resultArray);
    CRM_Utils_System::civiExit();
  }
}
0
Developer

Я не уверен, почему это не работает. 

Но вы можете сначала проверить/отладить значение $(this).attr('name')

Также еще одна вещь, как здесь объяснено [на вкладке настроек], вы можете проверить с помощью Firebug, чтобы увидеть ajax post запрос (для URL и его данных), который поможет вам решить проблему ,.

0
Krunal

сначала используйте .each, затем вы можете использовать $ (this) и установить все, что вам нужно, в переменную. результирующая переменная может быть использована при автозаполнении

$(".autosuggest").each(function (index, object) {
    var autosuggestType = $(this).attr("autoSuggestType");
    $(this).autocomplete("url",
            {                    
                extraParams: {
                    autoSuggestType: autosuggestType
                },
0
MichaelD