автозаполнение jQuery с использованием extraParams для передачи дополнительных переменных GET
Я имею в виду конкретно автозаполнение jQuery v1.1 плагин от Jörn Zaefferer [источник:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] поскольку, похоже, существует довольно много вариантов этого плагина.
Я пытаюсь передать дополнительные параметры на сервер, когда пользователь начинает печатать, потому что у меня есть несколько полей, для которых я хочу автозаполнение.
В дополнение к запросу, я хочу отправить атрибут имени ввода для сервера, но я не могу использовать $(this).буква attr('имя') в 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>
какие предложения?
13 ответов
Я использую функцию автозаполнения, которая теперь является частью 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
});
});
попробуйте это:
$('.ajax-auto input').setOptions({
extraParams: {
search_type: function(){
return $(this).attr('name');
}
}
})
см. также здесь
вы можете использовать встроенную автозаполнение 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
У меня была похожая проблема... не знаю, сработает ли это для тебя ....
Пробовал
$("#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 сделал трюк
спасибо
хотя это не идеально, я взломал / изменил плагин, чтобы заставить его работать на меня.
просто я изменил функцию 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);
}
});
Я все еще ищу элегантное решение для этого, поэтому не стесняйтесь продолжать предложения.
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.пользовательский интерфейс.автозаполнение 1.8.17
использование автозаполнения в 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, а затем с помощью search: который запускается до запуска источника автозаполнения: я смог получить необходимые мне данные из строки, в которой я был. Это дало мне хороший способ сохранить все мои поисковые и дополнительные элементы данных в одном месте.
The .родитель.)(parent () и так далее, потому что у меня есть многострочные таблицы для отображения моих данных в gridview, и мне нужно пересечь дерево, а затем найти текстовое поле или метку, которую я ищу, и изменить цвет фона строки с измененными данными. Я не профессионал. при поиске элементов с jQuery еще таким образом родитель.родитель... вещь.
что касается самого проголосовавшего ответа, я думаю, что есть гораздо более простой синтаксис, просто добавив дополнительное значение запроса в исходный 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.
Я не уверен, почему это не работает.
но вы можете сначала проверить/отладить на сумму $(this).attr('name').
и еще одна вещь, как здесь объяснили [на вкладке Параметры], вы можете проверить с Палий чтобы увидеть запрос ajax post (для url и его данных), который поможет вам решить проблему.
использовать a .сначала вы можете использовать $(this) и установить все, что вам нужно, в переменную. полученную переменную можно использовать в автозаполнении
$(".autosuggest").each(function (index, object) {
var autosuggestType = $(this).attr("autoSuggestType");
$(this).autocomplete("url",
{
extraParams: {
autoSuggestType: autosuggestType
},
У меня была такая же проблема, но как ни странно, только уменьшенная версия плагина автозаполнения. Когда я не уменьшенная версия, она работает. Я еще не смотрел на уменьшенную версию, чтобы увидеть, в чем разница.
Я понимаю, что на него уже ответили. но я надеюсь, что это поможет кому-то в будущем и экономит много времени и боли.
(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-код о том, как я возвращаю данные в этот вызов jQuery 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();
}
}