jQuery UI 자동 완성 JQuery

jQuery UI 자동 완성 JQuery

네, 이것 때문에 머리를 쥐어짜고 있지만(이것에는 서툴러요) 읽을 수 있는 건 다 읽었는데도 잘 안 돼요.

jquery ui를 사용하여 자동 완성을 시도합니다.

내 아들은 이렇게 생겼다.

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

정말 감사합니다!

가져올 개체를 jQueryUI가 예상하는 형식으로 배열로 다시 변환해야 합니다.

를 사용하여 를 변환할 수 있습니다.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
});

항목을 선택하면 텍스트 상자에 "키"가 표시됩니다.이 변경은, Tween을 조작하는 것으로 실시할 수 있습니다.label그리고.value의 속성$.map의 콜백 함수가 반환됩니다.

또는 JSON을 생성하는 서버 측 코드에 액세스할 수 있는 경우 데이터가 반환되는 방법을 변경할 수 있습니다.데이터가 다음과 같은 경우:

• 를 가진 오브젝트 배열입니다.label속성, avalue재산, 또는 둘 다
• 단순한 문자열 배열입니다.

즉, 데이터의 형식을 다음과 같이 지정할 수 있는 경우:

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

또는 다음과 같습니다.

["dealer 5", "dealer 6"]

그러면 JavaScript가 훨씬 단순해집니다.

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

이미 답변이 끝난 것은 이해하지만, 앞으로 누군가에게 도움이 되고, 시간과 고통을 많이 덜어주길 바랍니다.

완전한 코드는 다음과 같습니다.이것은 텍스트 박스에서 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();
  }
}

이 스크립트를 사용하여 자동 완성...

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

내 아들 반환:-[{"label":"Mahesh Arun Wani","value":"1"}]검색 후m

그러나 드롭다운에 표시됩니다.[object object]...

언급URL : https://stackoverflow.com/questions/11435433/jquery-ui-autocomplete-with-json