jQuery UI自动完成与JSON

好吧，我的脑子在这（我可怕的是）试图阅读所有我可以，但仍然不能得到它的工作。

试图用jQuery UI做自动完成

我的json看起来像这样

{"dealers": { "1156":"dealer 1", "1122":"dealer 2", "1176":"dealer 3", "1491":"dealer 4", "1463":"dealer 5", "269":"dealer 6" } } 

我正在尝试使用这些信息作为自动完成的来源。 我得到的响应对象就好了我只是无法得到它在正确的格式，以便我可以将“###”绑定到“价值”的隐藏字段，需要显示为部分落下。

一直在尝试一百万种不同的方式，但最近的尝试是在下面

 function ajaxCall() { $.getJSON("/example/location/example.json?term=" + $('#dealerName').val(), function(data) { $.each(data.dealers, function(k, v) { alert(k + ' : ' + v); }); }); } $('#dealerName').autocomplete({ source: ajaxCall, minLength: 2, delay: 100 }); 

请多谢！

Answer 1

您需要将您要获取的对象转换为jQueryUI所需格式的数组。

您可以使用$.map将dealers对象转换为该arrays。

 $('#dealerName').autocomplete({ source: function (request, response) { $.getJSON("/example/location/example.json?term=" + request.term, function (data) { response($.map(data.dealers, function (value, key) { return { label: value, value: key }; })); }); }, minLength: 2, delay: 100 }); 

请注意，当您select一个项目时，“钥匙”将被放置在文本框中。 你可以通过调整$.map的callback函数返回的label和value属性来改变它。

或者，如果您有权访问生成JSON的服务器端代码，则可以更改数据的返回方式。 只要数据：

• 是具有label属性， value属性或两者的对象数组
• 是一个简单的string数组

换句话说，如果你能像这样格式化数据：

 [{ value: "1463", label: "dealer 5"}, { value: "269", label: "dealer 6" }] 

或这个：

 ["dealer 5", "dealer 6"] 

那么你的JavaScript变得更简单了：

 $('#dealerName').autocomplete({ source: "/example/location/example.json" }); 

Answer 2

我知道它已经被回答了。 但我希望这将有助于未来的人，节省了这么多的时间和痛苦。

完整的代码如下：这一个我做了一个文本框，使其在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(); } }