Typeahead 3 및 부트 스트랩 - 자동 완성 이름 및 ID

저는 PHP 및 jQuery로 작성하는 기본 수준의 프로그래머입니다.Typeahead 3 및 부트 스트랩 - 자동 완성 이름 및 ID

내 사이트에 텍스트 상자가있는 자동 완성 필드를 갖기 위해 노력하고 있으며 사람들이 타이핑을 시작하면 PHP 페이지의 사용자 및 ID 번호와 관련된 결과를 가져옵니다.

나는이를 태그 인풋과 결합합니다. 기본적으로 Gmail과 같아지기를 원합니다. 누군가의 이름을 입력하고 태그로 나타나게하십시오. 데이터 (특히 ID)에 액세스 할 수 있어야합니다. 이름을 선택하면 해당 ID를 기반으로 이메일을 보내는 코드가 작성되기 때문입니다.

내가 생각해야 할 일을 정확히 이해할 수 없다 - 나는 다른 선행 입력 플러그인과 혼동 했어요 - 나는 bootstrap3을 사용해야합니다 - 내 사이트 내가 알고있는 것처럼 부트 스트랩 3.

을 사용하기 때문에 -typeahead.min.js 파일을 사용하십시오. 이것은 내 페이지에 포함되어 있습니다.

내가 볼 수있는 것부터, 대부분의 작업이 완료되었습니다. 올바른 결과가 내 아약스 호출에서 반환되지만, 옵션이 화면에 표시되지 않고 "TypeError : g는 정의되지 않았습니다 "오류가 발생합니다.

$('#user_name').tagsinput({ 
    typeahead: { 
    source: function(query) { 
     var fetched = $.get('group.php?pa=ajax_get_users&term='+query); 
     console.log(fetched); 
    } 
    } 
})

위에서 언급 한 페이지는 이름과 ID의 JSON 인코딩 된 배열을 반환하고, 작동하는 것 같다 : 내가 지금까지 (내가 필요한 무엇을 게시 할 수 있습니다)까지 어딘지 여기

이다. 불을 지르고를 사용하여, 나는이 (예를 들어) 것을 볼 수 있습니다 - 내가 필드에 '에'입력 할 때, 그것은 호출을 다음과 같은가 반환됩니다

[{"label":"Toby Behan","id":"2"},{"label":"Toby Behan","id":"3126"},{"label":"Tommy Streisand","id":"3144"}]

을 console.log() 함수는 유효한 개체를 보여줍니다 방화범이 끌려 돌아왔다.

드롭 다운 및 선택과 관련하여 올바르게 표시하려면 어떻게해야합니까?

도움 주셔서 감사합니다.

출처

2014-11-19 Toby Behan

I can't understand exactly what I need to do though - I've been confused with the different Typeahead plugins - because my site uses Bootstrap 3.

부트 스트랩 3 타입 어 헤드와 typeahead.js 중에서 선택해야한다고 생각합니다. 두 플러그인 모두 작동해야하지만 둘 중 하나만 사용해야합니다.

중요한 문제는 태그 입력에 값 배열이 필요한 반면 group.php은 개체 배열을 반환하는 것으로 보입니다. jQuery.map()을 사용하여 값을 변환 할 수 있습니다. 부트 스트랩 3 선행 입력을 사용하는 경우

그래서 :

$('input').tagsinput({ 
    typeahead: {     
    source: function(query) { 
     return $.map($.get('group.php?pa=ajax_get_users&term='+query)function(values){return values.label;}); 
    } 
    } 
});

또한, https://github.com/bassjobsen/Bootstrap-3-Typeahead#bootstrap-tags-input 및 typeahead.js를 들어 https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/33#issuecomment-38047656

를 참조 $.map

을 사용하는 방법에 대한 https://gist.githubusercontent.com/jharding/9458749/raw/bloodhound.js 참조

출처

2014-11-20 15:58:10

Typeahead 3 및 부트 스트랩 - 자동 완성 이름 및 ID

답변

관련 문제