programing

Facebook 스타일 JQuery 자동 완성 플러그인

nasanasas 2020. 10. 12. 07:37
반응형

Facebook 스타일 JQuery 자동 완성 플러그인


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

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

이것들 중 하나를 시도해 보셨습니까? 구현 및 사용자 정의가 쉬웠습니까?


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

나는 방금 이것을 시도했고 JSON을 출력하기 위해 asp.net 페이지를 사용하여 구현하는 것이 정말 쉬웠습니다 (검색 매개 변수에서).

$(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..."
    });
});

이것은 아주 좋은 것입니다! 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"});

다음은 특정 순서없이 찾은 내용입니다.


fb 및 tw와 같은 사용자 언급 기능을 찾고 있다면 이것은 좋은 플러그인입니다 http://podio.github.io/jquery-mentions-input/


이것은 JQueryUI에 통합되기 전의 원래 JQuery 자동 완성 플러그인입니다. 전체 JQueryUI 라이브러리가 아닌 JQuery 만 제공하려는 경우이 라이브러리를 사용하십시오. 나는 과거에 이것을 사용했고 그것에 만족했습니다.

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete /


이걸 찾았어요. 견고하고 잘 관리되며 반응이 좋습니다.

http://ivaynberg.github.io/select2/


I was quite impressed with the devbridge autosuggest. Highly customizable

참고URL : https://stackoverflow.com/questions/1191807/facebook-style-jquery-autocomplete-plugin

반응형