使用extraParams传递额外的GET变量的jQuery自动完成
我指的是JörnZaefferer的jQuery Autocomplete v1.1插件[来源： http ： //bassistance.de/jquery-plugins/jquery-plugin-autocomplete/]，因为这个插件似乎有很多变种。
我正在尝试在用户开始输入时将其他参数传递给服务器，因为我有多个字段，我希望自动完成提供建议。
除了查询之外，我想将输入名称属性发送到服务器，但我似乎无法在extraParams中使用$（this）.attr（’name’）。
我的jQuery：
$('.ajax-auto input').autocomplete('search.php', { extraParams: { search_type: function(){ return $(this).attr('name'); } } }) 这是我的HTML。
有什么建议？
我正在使用自动完成function，现在是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 jQueryfunction。
在第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.ui.autocomplete 1.8.17为我工作
在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然后使用search：在自动完成触发源之前触发：我能够从我所在的行获取所需的数据。 这为我提供了一个很好的方法，可以将所有搜索和额外数据项保存在一个地方。
.parent（）。parent（）等是因为我有多行表来在gridview中显示我的数据，我需要遍历树，然后找到我正在寻找和更改的文本框或标签具有更改数据的行的背景颜色。 我不擅长使用jQuery查找项目，因此是parent.parent …的东西。
关于最多投票的答案，我认为通过将额外的请求值附加到源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') 。
此处还有一个问题[在选项选项卡中]，您可以查看Firebug以查看ajax post请求（对于url及其数据），这将有助于您解决问题。
首先使用.each，然后你可以使用$（this）并将你需要的任何内容设置到一个变量中。 结果变量可以在自动完成中使用
$(".autosuggest").each(function (index, object) { var autosuggestType = $(this).attr("autoSuggestType"); $(this).autocomplete("url", { extraParams: { autoSuggestType: autosuggestType },
我有同样的问题，但奇怪的是，只有自动完成插件的缩小版本。 当我使用非缩小版本时，它可以工作。 我还没有看过缩小版本，看看有什么区别。
试试吧
$( "#ricerca" ).autocomplete({ source: "response.php?param=param", minLength: 2 });
我知道它已经得到了解答。 但我希望这将有助于将来的某些人，并节省大量的时间和痛苦。
(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 ) ); } }); } });
关于我如何在自动完成中将数据返回到此jquery ajax调用的PHP代码：
/** * 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(); } }