使用 JSON 的 jQuery UI 自动完成

Posted 2023-03-05

【中文标题】使用 JSON 的 jQuery UI 自动完成

【英文标题】：jQuery UI autocomplete with JSON

【发布时间】：2012-07-11 05:38:36

【问题描述】：

好吧，我一直在为此绞尽脑汁（我对此很糟糕），但是我尝试了所有我能读到的内容，但仍然无法正常工作。

尝试使用 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
);

非常感谢！

【问题讨论】：

k 应该包含它们的名称，这就是您想要的。您当前的代码到底有什么问题？

执行console.log(data) 以查看data 实际包含的内容。如果它是空的，那么您的服务器上的脚本可能有问题。

【参考方案1】：

您需要将要返回的对象转换为 jQueryUI 期望格式的数组。

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

$('#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
);

请注意，当您选择一个项目时，“键”将被放置在文本框中。您可以通过调整$.map 的回调函数返回的label 和value 属性来更改此设置。

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

是具有label 属性、value 属性或两者兼有的对象数组，或 是一个简单的字符串数组

换句话说，如果您可以像这样格式化数据：

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

或者这个：

["dealer 5", "dealer 6"]

然后你的 javascript 就变得简单多了：

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

【讨论】：

非常感谢，我正在让后端人员修复输出，使其成为对象数组

应该把“src”改成“data”

@ThangNguyen：谢谢——已修复。

【参考方案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();
  

【讨论】：

如果您不想被黑客入侵，请使用 sql prepare 语句。

【参考方案3】：

我使用这个脚本来自动完成...

$('#custmoers_name').autocomplete(
    source: function (request, response) 

        // $.getJSON("<?php echo base_url('index.php/Json_cr_operation/autosearch_custmoers');?>", function (data) 
          $.getJSON("Json_cr_operation/autosearch_custmoers?term=" + request.term, function (data) 
          console.log(data);
            response($.map(data, function (value, key) 
                console.log(value);
                return 
                    label: value.label,
                    value: value.value
                ;
            ));
        );
    ,
    minLength: 1,
    delay: 100
);

我的 json 返回 :- ["label":"Mahesh Arun Wani","value":"1"] 搜索后 m

但它显示在下拉列表中[object object]...

【讨论】：

请给我一个建议？