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]顯示...