Ajax 호출 채우기 Typeahead 부트스트랩

Ajax 호출 채우기 Typeahead 부트스트랩

제가 하려는 것은 아약스를 통해 json 객체를 얻고 부트스트랩 유형을 한 가지 값으로 미리 채우는 것입니다.

내 코드는 다음과 같습니다.

nameTypeHead: function () {
        var _self = this,
            searchInput = $('#nameTypeHead'),
            arr = [];

        function getArray() {
            $.ajax({
                url: '/Home/AutoComplete',
                type: 'post',
                dataType: 'json',
                data: { searchText: searchInput.val() },
                success: function (data) {
                    $.each(data, function () {
                        arr.push(this.Name);
                    });
                    return arr;
                }
            });
        }

        searchInput.typeahead({
            source: getArray()
        });
    } 

arr이 null이라는 오류를 수신했습니다.

저도 시도해봤는데요..parseJSON()하지만 성공하지 못했습니다.

$.each($.parseJSON(data), function () {
   arr.push(this.Name);
});

Typeahed에서 내 Json 개체의 이름 값만 표시하려면 어떻게 해야 합니까?

만약 내가 Ajax 성공에.alert(JSON.stringify(data));그것은 내 Json Object에 정확하게 경고합니다.

나는 처음부터 그것을 만들었습니다.

$('#typeahead').typeahead({

    source: function (query, process) {
        return $.getJSON(
            'path/to/lookup',
            { query: query },
            function (data) {
                return process(data);
            });
    }

});

어디에data는 다음과 같은 간단한 JSON 어레이입니다.

 [
   "John",
   "Jane",
   "Alfredo",
   "Giovanni",
   "Superman"
 ]

만약 당신이data배열에 다른 구조가 있습니다. 전달하기 전에 다시 정렬하십시오.process()방법.

여기에서 실제 사례를 찾을 수 있습니다.

편집 - json 데이터를 기반으로 합니다.

[
    {'id':'0', 'name':'John'},
    {'id':'1', 'name':'Jane'}, 
    {'id':'2', 'name':'Alfredo'},
    ...
}

그getJSON콜백은 다음과 같습니다.

function (data) {
    return process(data.map((x => x.name));
}); 

이 요점을 확인하십시오.자동 완성, 빠른 타이핑 및 캐시 처리

https://gist.github.com/mrgcohen/5062352

이것이 저에게 효과가 있었습니다.

HTML 설정:

<!-- HTML Setup-->
<input type="text" id="my-typeahead" />

Javascript:

/* 
example remote-data-source
[
  {
    id:1,
    name:'Batman'
  },{
    id:2,
    name:'Superman'
  } 
]
*/

$('#my-typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'myDataset',
    source: function(str, sync, async) {
        // abstracting out the "REST call and processing" in a seperate function
        restCall(str, async);
    },
    templates: {
        suggestion: function(user) {
            return '<div>' + user.name + '</div>';
        },
        pending: '<div>Please wait...</div>'
    }
});

// The function that will make the REST call and return the data
function restCall(str, async) {
    return $.ajax('http://url-for-remote-data-source/query?name=' + str, {
        // headers and other setting you wish to set-up
        headers: {
            'Content-Type': 'application/json',
        },
        // response
        success: function(res) {
            //processing data on response with 'async'
            return async(res.data);
        }
    });
}

참조:

Typeahead Docs - Datasets: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets

Jquery **$.ajax()**: https://api.jquery.com/jquery.ajax/

행운을 빌어요.

언급URL : https://stackoverflow.com/questions/12621823/ajax-call-populate-typeahead-bootstrap