JQuery UI自动完成与JSON

Question

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

试图做自动完成与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对象转换为该数组。

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

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)); 
        } 
       }); 
      } 
    }); 

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(); 
    } 
} 

Answer 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]显示...