Автозаполнение jQuery с использованием дополнительных параметров для передачи дополнительных переменных GET
Я имею в виду конкретно плагин jQuery Autocomplete v1.1 от Jörn Zaefferer [источник: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/], поскольку, похоже, несколько вариантов этого плагина.
Я пытаюсь передать дополнительные параметры на сервер, когда пользователь начинает печатать, потому что у меня есть несколько полей, которые я хочу, чтобы автозаполнение предоставило предложения.
В дополнение к запросу, я хочу отправить атрибут имени ввода на сервер, но я не могу использовать $(this).attr('name') в дополнительных файлах.
Мой 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>
Любые предложения?
Ответы
Ответ 1
Я использую функцию автозаполнения, которая теперь является частью 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
});
});
Ответ 2
Попробуйте следующее:
$('.ajax-auto input').setOptions({
extraParams: {
search_type: function(){
return $(this).attr('name');
}
}
})
См. также здесь
Ответ 3
Вы можете использовать встроенный автозаполнение 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
Ответ 4
У меня была аналогичная проблема... не знаю, будет ли это работать для вас....
Я пробовал
$("#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 сделал трюк
Спасибо
Ответ 5
Хотя он не идеален, я взломал/модифицировал плагин, чтобы заставить его работать для меня.
Просто я изменил функцию jQuery AJAX внутри плагина.
Вокруг строки 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);
}
});
Я все еще ищу элегантное решение для этого, поэтому не стесняйтесь оставлять предложения.
Ответ 6
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
Ответ 7
Использование автозаполнения в JQuery 1.7.something...
Использование сетки данных 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() и так далее, потому что у меня есть многострочные таблицы для отображения моих данных в gridview, и мне нужно пройти по дереву, а затем найти текстовое поле или метку, которую я ищу для и изменить цвет фона строки с измененными данными. Я не разбираюсь в поиске элементов с помощью jQuery, но, таким образом, parent.parent... thing.
Ответ 8
Что касается самого голосованного ответа, я думаю, что есть гораздо более простой синтаксис, просто добавив дополнительное значение запроса в исходный 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.
Ответ 9
Я не уверен, почему он не работает.
Но вы можете сначала проверить/отладить значение $(this).attr('name').
Также здесь объясняется, что [на вкладке опций], вы можете проверить с помощью Firebug, чтобы увидеть запрос на отправку ajax (для URL и его данных), которые помогут вам решить проблему.
Ответ 10
сначала используйте .each, затем вы можете использовать $(this) и установить все, что вам нужно, в переменную. результирующая переменная может использоваться в автозаполнении
$(".autosuggest").each(function (index, object) {
var autosuggestType = $(this).attr("autoSuggestType");
$(this).autocomplete("url",
{
extraParams: {
autoSuggestType: autosuggestType
},
Ответ 11
У меня была такая же проблема, но, как ни странно, только с мини-версией плагина автозаполнения. Когда я использовал версию без миниатюры, она работает. Я еще не посмотрел на сокращенную версию, чтобы узнать, какая разница.
Ответ 12
Попробуйте
$( "#ricerca" ).autocomplete({
source: "response.php?param=param",
minLength: 2
});
Ответ 13
Я понимаю, что на него уже был дан ответ. но я надеюсь, что это поможет кому-то в будущем и сэкономит столько времени и боли.
(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();
}
}
