Facebook 스타일 JQuery 자동 완성 플러그인 [닫힘]

78

나는 당신이 여러 항목을 선택할 수 있다는 점에서 페이스 북처럼 자동 완성을 수행하는 플러그인 이후-스택 오버플로 질문에 태그를 지정하는 방법과 유사합니다.

다음은 내가 만난 몇 가지입니다.

이것들 중 하나를 시도해 보셨습니까? 쉽게 구현하고 사용자 정의 할 수 있었습니까?

jquery  jquery-plugins  autocomplete 
— 루크로 레이
소스
어떤 플러그인을 사용 했습니까 ?? 나는 파이어 폭스와 IE에서 잘 작동하는 것을 찾고있다
— San
경고 : 이제 내 프로젝트에서 JQuery-tokeninput을 구현했으며 그뿐만 아니라 여기에 언급 된 다른 모든 항목이 입력 필드를 별도의 줄에 배치하려는 것 같습니다. 같은 줄에 넣을 수없는 것 같습니다 To: [..the field..]. 아마도 절대 위치 지정 또는 테이블 사용이 해결책 일 수 있지만 나도별로 마음에 들지 않지만 뭔가
— Adrian Smith
JQuery-tokeninput은 이제 동일한 줄에 여러 토큰을 넣을 수있는 facebook 스타일을 가지고 있습니다. 데모를 참조하십시오.
— Druvision 2013

답변:

84

https://github.com/loopj/jquery-tokeninput

나는 방금 이것을 시도했고 JSON을 출력하기 위해 asp.net 페이지를 사용하여 구현하는 것이 정말 쉬웠습니다 (검색 매개 변수에서) 그런 다음 작성하는 데 필요한 Javascript 몇 줄 (및 설정)이 있습니다.

$(document).ready(function() {
        $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", {
        hintText: "Begin typing the user name of the person you wish to assign.",
        noResultsText: "No results",
        searchingText: "Searching..."
    });
});
— dkarzon
소스
또한 FireFox 버그가있는 것으로 보입니다
— AnApprentice
@AnApprentice : 최신 버전에는 많은 버그 수정이 있습니다.
— Dave Jarvis
아직 즉석에서 새 태그 만들기를 지원하지 않음
— deerchao 2011 년
이 플러그인을 좋아했지만 즉석 지원이 필요했기 때문에 jqueryUI 자동 완성을 위해 놓아야했습니다
— Omnipresent
3
당신이 ASP.Net을 사용하는 경우는 플러그인 JQuery와 - tokeninput에 서버 측 기능을 추가 내 opensourse 프로젝트 ASPTokenInput 사용할 수 있습니다 github.com/harindaka/ASPTokenInput/wiki
— Harindaka
28

이것은 아주 좋은 것입니다! https://github.com/wuyuntao/jquery-autosuggest/

사용 방법

페이지에 이미로드 된 최신 jQuery 라이브러리 (최소 1.3 이상)가 있는지 확인해야합니다. 그 후 정말 간단합니다. 페이지에 다음 코드를 추가하기 만하면됩니다 (jQuery의 준비 함수로 코드를 래핑해야 함).

$(function(){
    $("input[type=text]").autoSuggest(data);
});

위의 코드 줄은 input 페이지의 모든 텍스트 유형 요소에 AutoSuggest를 적용 합니다. 각각은 동일한 데이터 세트를 사용합니다. 페이지에 서로 다른 데이터 세트를 사용하는 여러 자동 제안 필드를 사용하려면 개별적으로 선택해야합니다. 이렇게 :

$(function(){
    $("div.someClass input").autoSuggest(data);
    $("#someID input").autoSuggest(other_data);
});

위의 작업을 수행하면 다른 옵션과 다른 데이터 세트를 전달할 수 있습니다. 다음은 데이터 개체 및 기타 다양한 옵션과 함께 AutoSuggest를 사용하는 예입니다.

var data = {items: [
    {value: "21", name: "Mick Jagger"},
    {value: "43", name: "Johnny Storm"},
    {value: "46", name: "Richard Hatch"},
    {value: "54", name: "Kelly Slater"},
    {value: "55", name: "Rudy Hamilton"},
    {value: "79", name: "Michael Jordan"}
]};
$("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"});
— webcgo
소스
1
이것은 최고의 자동 제안 플러그인입니다. 사용자가 중복 레코드를 추가 할 수 없습니다!
— atmorell
2
기능은 풍부하지만 수많은 버그가 있습니다. : 결국, 나는 내 자신의 만든 the.deerchao.net/TagEditor을
— deerchao
@deerchao 귀하의 작업은 매우 훌륭합니다. C # 코드로 묶을 수 있는지 알고 싶었습니까? 태그를 의미하고 웹 서비스를 사용하여 즉석에서 수행하는 방법, 감사합니다
— user1074474
@ user1074474 기본적으로 URL에서 검색된 JSON 데이터 만 지원합니다. 그러나 모든 소스가 있으며 원하는대로 사용자 정의 할 수 있습니다.
— deerchao
@deerchao이 플러그인에 대한 업데이트가 있습니까? 사용하려고하는데이 오류가 TypeError: $$.autocomplete is not a function [Break On This Error] close: function () {도움이 되나요?
— ReynierPM
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.