Tự động hoàn thành giao diện người dùng jQuery với JSON

Question

Được rồi, tôi đã quên bộ não của mình về điều này (nhưng tôi đã thử đọc tất cả những gì tôi có thể và vẫn không thể làm cho nó hoạt động được).

cố gắng làm autocomplete với jquery ui

json của tôi trông như thế này

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

tôi đang cố gắng sử dụng những thông tin này như là nguồn cho autocomplete. tôi nhận được đối tượng phản hồi tốt Tôi chỉ gặp khó khăn khi nhận được nó ở định dạng phù hợp để tôi có thể đặt "###" trong trường ẩn gắn với "giá trị" cần được hiển thị như là phần của thả xuống.

đã cố gắng một triệu cách khác nhau nhưng một nỗ lực gần đây là dưới

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

Xin vui lòng và cảm ơn bạn nhiều!

Answer 1

Bạn cần chuyển đổi đối tượng mà bạn đang quay trở lại thành một mảng theo định dạng mà jQueryUI mong đợi.

Bạn có thể sử dụng $.map để chuyển đổi đối tượng dealers thành mảng đó.

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

Lưu ý rằng khi bạn chọn một mục, "khóa" sẽ được đặt trong hộp văn bản. Bạn có thể thay đổi điều này bằng cách tinh chỉnh các thuộc tính label và value mà trả về hàm trả về của hàm trả về $.map.

Hoặc, nếu bạn có quyền truy cập vào mã phía máy chủ đang tạo JSON, bạn có thể thay đổi cách dữ liệu được trả về. Chừng nào các dữ liệu:

• là một mảng của các đối tượng mà có một tài sản label, một tài sản value, hoặc cả hai, hoặc
• Là một mảng đơn giản của chuỗi

Nói cách khác, nếu bạn có thể định dạng dữ liệu như thế này:

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

hay này:

["dealer 5", "dealer 6"] 

Sau đó, JavaScript trở nên đơn giản hơn nhiều:

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

Answer 2

Tôi hiểu rằng mình được trả lời rồi. nhưng tôi hy vọng điều này sẽ giúp một người nào đó trong tương lai và tiết kiệm rất nhiều thời gian và đau đớn.

mã hoàn chỉnh bên dưới: Cái này tôi đã làm cho một hộp văn bản để làm cho nó Tự động hoàn thành trong CiviCRM. Hy vọng nó sẽ giúp người

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

mã PHP về cách tôi đang trở về dữ liệu để jquery này gọi ajax trong autocomplete:

/** 
* 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

tôi sử dụng kịch bản này để tự động hoàn ...

$('#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 My trở lại: - [{"label":"Mahesh Arun Wani","value":"1"}] sau khi tìm kiếm m

nhưng nó hiển thị trong danh sách thả xuống [object object] ...