Chosen: 원격 데이터 소스에서 가져오기

이것은 jquery 자동 완성보다 조금 낫지 않습니까? 궁극적으로 원격 데이터 소스를 보고 싶습니다(검색 결과에 대한 콜백 제공 기능)

나는 이 요청을 세 번째로 합니다. jQuery UI 자동 완성 기능처럼 원격 소스를 지정할 수 있는 기능이 있으면 매우 편리합니다.

또는 더 나은 방법: jQuery UI에서 선택한 항목을 포함합니다. :)

+1

더 구체적으로 내 +1은 자유 텍스트 항목과 함께 원격 데이터 소스를 사용하는 아이디어에 대한 것입니다(예: 태그 지정을 돕기 위해 ajax 호출 사용)

죄송합니다. 충분히 명확하지 않았지만 "원격 데이터 소스" 통합이 원래 의도한 것이었습니다. 지적해 주셔서 감사합니다. 물론 이 플러그인은 jQuery 자동 완성 기능보다 훨씬 낫습니다. daFish가 언급했듯이 jQuery UI 자체의 일부로 이것을 보고 싶습니다.

원격 데이터 소스 지원을 위해 +1

나는 그것을 이해하지 못한다. 선택된 것은 자동 완성이나 원격 데이터 가져오기가 아니라 SELECT 요소에 대한 더 나은 사용성과 아름다움에 관한 것입니다. 원격 데이터를 원하면 Chosen 호출 전에 수집하여 de DOM에 넣습니다.

@juanghurtado : 300K 항목이 포함된 다중 선택 상자가 있는 경우 HTML에 완전히 쓸 수 없습니다. Chosen은 검색 및 선택을 위한 완벽한 인터페이스를 제공합니다. 이 기능을 제공하는 다른 많은 라이브러리가 있습니다(예: [1], [2] 등). 이 모든 것 중에서 Chosen이 가장 잘 작동하지만 원격 데이터 소스 지원에 추가되는 매우 큰 컬렉션은 지원하지 않습니다. 또한 Chosen이 이를 지원한다면 두 개가 아닌 하나의 플러그인을 스킨하고 최신 상태로 유지해야 합니다.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

글쎄, 만약 당신의 SELECT 아이템에 300,000개의 아이템이 있다면, (IMHO) 당신은 뭔가 잘못하고 있는 것입니다… 더 나은 방식으로 인터페이스를 처리할 수 있는 많은 옵션이 있습니다.

Chosen은 할 수 있는 일을 할 수 있습니다... swish 군용 칼처럼 많은 일(원격 데이터 소스, 항목에 대한 이미지 연결, 사용자 지정 필터링, AJAX 쿼리 등)을 수행할 수 있으며 하나만을 위한 완벽한 도구가 될 수 없습니다(기존 SELECT 에 대한 더 나은 인터페이스

El 10/08/2011, a las 22:56, ivaynberg escribió:

@juanghurtado : 300K 항목이 포함된 다중 선택 상자가 있는 경우 HTML에 완전히 쓸 수 없습니다. Chosen은 검색 및 선택을 위한 완벽한 인터페이스를 제공합니다. 이 기능을 제공하는 다른 많은 라이브러리가 있습니다(예: [1], [2] 등). 이 모든 것 중에서 Chosen이 가장 잘 작동하지만 원격 데이터 소스 지원에 추가되는 매우 큰 컬렉션은 지원하지 않습니다. 또한 Chosen이 이를 지원한다면 두 개가 아닌 하나의 플러그인을 스킨하고 최신 상태로 유지해야 합니다.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/harvesthq/chosen/issues/79#issuecomment -1776643

정말 그것에 대해 논쟁 할 수 없습니다 ...

jquery 자동 완성 플러그인과 같이 선택한 항목에서 검색할 때 원격 데이터를 가져오고 싶습니다. pls help me

+1 원격 데이터를 지원합니다.

UI는 훌륭하지만 원격 데이터를 지원하지 않는 것과 같은 몇 가지 문제가 있습니다.

나는 이것이 가능하다고 생각하지만 생각만큼 쉽지는 않다. 이것은 github이고 오픈 소스이므로 일부 코드를 살펴보겠습니다.

@juanghurtado 또한 기존 기능을 부풀리지 않고 이 작업을 수행할 수 있다고 생각합니다. jquery와 프로토타입 모두 원격 데이터 소스에 필요한 모든 것을 제공합니다.

results_search()는 키를 누르는 동안 트리거되는 것 같습니다. 여기에서 선택한 기본 동작을 재정의합니다. 좀 더 깊이 파고들 필요가 있지만 winnow_results()를 모방하고 로딩 동작을 표시하는 방법(예: winnow_loading_results())을 추가할 수 있다면 잘 작동할 것 같습니다.

살펴볼 또 다른 함수는 winnow_results_clear()입니다.

어려운 부분은 이것을 Chosen에 원활하게 통합하는 방법을 알아내는 것입니다. 옵션에 있어야 하나요? 그냥 서브클래스라고 해야 할까요? 그리고 이것이 핵심 개발자가 마스터 프로젝트에 허용하는 것입니까?

실제로 - 우리는 이 문제를 닫아야 합니다. #162에 대해 많은 작업이 수행되고 있으며 이는 우리가 원하는 모든 것입니다.

이 시대에 이 기능은 필수이며 곧 구현되기를 진심으로 바랍니다. 다른 모든 면에서 선택된 것은 완벽합니다. :)

원격 데이터 소스에서 가져오는 문제는 어떻게 되었습니까?

@pfiller 가 대화에 참여할 시간입니다.

+1 이거 보고싶다

페이지가 제공될 때 한 번에 원격 값을 로드하므로 새 데이터를 업데이트하거나 가져올 수 없는 경우 선택 항목에 최소한 새 옵션을 추가할 수 있으면 페이지가 새로 고쳐질 때까지 클라이언트 측을 유지할 수 있습니다. 따라서 원격 가져오기에 +1 및/또는 새 옵션을 추가하는 기능에 +1. 이것이 의미가 있기를 바랍니다...

잘로카 요청 +1

17500개의 레코드가 있는 테이블이 있는데 페이지를 로드할 때 속도가 느려지고 결국 충돌이 발생합니다... 테이블에서 일치하는 항목을 검색하는 방법이 구현될 수 있다면 가장 좋을 것이라고 생각합니다.

누군가가 구현했습니다: https://github.com/meltingice/ajax-chosen

저는 jQuery 전문가가 아니며 실제로 그것에 대해 아는 것이 없습니다. 그러니 제가 무식하게 설명하는 것을 용서해 주십시오. 내 문제를 설명할 적절한 단어를 찾을 수 없습니다. 나는 그 간단한 지시를 따랐다: 클래스를 추가하고, 스크립트를 넣고, 함수를 호출했다. 선택 입력이 없는 페이지를 제외하고 모든 것이 훌륭하게 작동했습니다. 그리고 데이터가 Ajax의 도움으로 진행되는지 확신할 수 없습니다. 내가 가정할 수 있는 것은 양식이 MySQL 데이터베이스의 테이블에서 생성된다는 것뿐입니다. 입력 옵션을 선택하십시오. 적어도 내가 페이지를 편집했을 때처럼 보였다. 따라서 페이지를 로드할 때 선택 입력에 'chzn-select' 클래스만 표시되며 이는 스크립트가 전혀 작동하지 않음을 의미합니다. 관련 문제를 읽어보니 원격 데이터 소스 때문인줄 알앗는데 해결 방법을 모르겠습니다. 사실 여기서 무슨 말을 하는지 잘 이해가 되지 않습니다. 나는 성공하지 않고 위에서 제공된 Ajax-chosen을 시도했고 여기에 언급된 다른 '해킹'을 시도했습니다. 누군가가 간단한 단어로 설명 할 수 있습니까? 내 경우에 무언가를 할 수 있습니까?

Mac OS와 Windows에서 모두 시도한 jQuery 1.4.2를 사용하고 있습니다. 여기에서 확인할 수 있습니다: http://94.125.8.168/eng/ (플라이트 정보라는 중앙 블록에서 검색 또는 시간표 탭을 클릭하십시오). 목적지, 항공편 번호 및 공항을 선택해야 합니다.

@ffiona 선택한 호출을 jQuery 준비 함수 로 래핑해야 합니다.

$(document).ready(function() {
  $(".chzn-select").chosen();
});

스레드에 대한 주제에 대한 향후 질문을 유지하십시오. 질문이 있는 경우 새 문제를 여는 것을 환영합니다.

@pfiller 는 여러분이 작업 중이거나 작업할 기능입니까? 나는 다른 모든 아약스 선택 해킹을 시도했지만 그들 중 누구도 실제로 작동하지 않습니다. 사용자가 주식 기호를 입력하는 증권 거래소 앱에서 작업하고 있기 때문에 이것이 정말 필요합니다.

@all 선택된 것에서 ajax 자동 완성을 얻기 위한 나의 옵션은 먼 길일 것이며 대안을 찾아야 할 수도 있습니다. 누구든지 이 기능을 사용하여 선택한 다른 대안을 추천할 수 있습니까?

저도 최근에 하나 만들었습니다.. https://github.com/ksykulev/chosen-ajax-addition

@ksykulev 혹시 이것에 대한 라이브 데모가 어딘가에 있습니까?

@jaquery
http://sykulev.com/ajaxchosen/index.html 예제를 빠르게 해킹했습니다.

내 저장소의 /example 아래에 코드를 추가했습니다.

@ksykulev : 귀하의 버전은 단일 선택으로 정말 훌륭한 작업을 수행합니다. 감사합니다! Btw 다중 선택에서는 작동하지 않습니다. 시간나면 이거 한번 봐야겠네요.

@meltingice 버전은 다중 선택에서도 정말 이상한 일을 합니다. Chosen 함수를 전혀 사용하지 않기 때문이라고 생각합니다. 결과가 클라이언트로 다시 전송된 후 크기 조정).

@jbbarth : 네 맞습니다. 다중 선택으로 테스트하지 않았기 때문에 잘 작동하지 않는다고 상상할 수 있을 뿐입니다. 내 라이브러리의 완성도 측면에서 이러한 지원을 확실히 추가할 수 있습니다. 나는 그것을 얻을 것이다. 감사 해요!

나는 Chosen을 기반으로 한 모양과 느낌으로 내 자신의 버전을 롤링했습니다.

https://github.com/ivayberg/select2

ajax/jsonp 원격 데이터 세트 및 무한 스크롤(페이징된 원격 데이터 세트의 지연 로드)을 지원합니다. 아직 다중 선택을 지원하지 않습니다.

@ivaynberg 저는 이것에 주목하고 있습니다.

Chosen(특히 태그와 같은 다중 선택 지원)으로 기능 패러디에 도달하면 이 스레드를 확실히 부딪혀야 합니다.

나는 Chosen의 모양과 느낌을 좋아하지만 실제로 구현에 필요한 것들을 남겨둡니다.

아주, 아주 좋은 작품입니다!

@ivaynberg 드롭 다운 및 검색 입력 너비를 구체적으로 계산하는 코드가 여전히 선택되어 있음을 알았습니다.

이것을 확인하고 싶을 수도 있습니다 : https://github.com/harvesthq/chosen/pull/407

최근에 다중 선택을 지원하도록 선택한 Ajax 버전을 업데이트했습니다. http://sykulev.com/ajaxchosen/index.html

@justindujardin Select2 마스터에는 이제 기능 패리티가 있습니다. 407에서 크기 조정에 대해 살펴보겠지만 Select2의 프로젝트에 대해 더 많은 논의를 해야 합니다.

나는 Select2 를 정말 좋아하고 모든 사람이 Select2로 전환하는 것이 좋습니다. 헤.

@ProLoser – 감사합니다... 정확히 제가 찾던 것입니다. 훨씬 더 나은 옵션으로 보입니다.

셀렉트2 FTW!

Select2는 갈 길입니다!

몇 년이 지난 후 업데이트가 있습니까?

왜 그런 임프 기능이 누락 되었습니까?

흠... 냄새가 나네요. 텍스트 강조 표시 때문에 Chosen을 구현하기로 결정했지만 AJAX를 추가하기가 그렇게 어려울 줄은 몰랐습니다. 모든 사람이 요구 사항을 충족하기 위해 여기에서 건너뛰고 있다면 select2로 갔어야 했다고 생각합니다. :(

훌륭한 기능입니다. 많은 포크가 이 기능을 제안하지만 구현은 종종 혼란스럽습니다. :+1:

나는 쉬운 원숭이 패치 솔루션을 생각해 냈습니다.

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

결과 렌더링 시 호출될 '소스' 기능 옵션을 선택할 수 있습니다. 문자열 입력 값과 콜백 함수 인수가 있습니다. 콜백 함수는 제안을 렌더링합니다. 결과가 변경되지 않아야 하는 경우 인수 없이 즉시 호출해야 합니다. 그렇지 않으면 결과를 요청하고 결과를 얻었을 때 콜백으로 보낼 수 있습니다. 결과 개체의 형식은 { value: "label", value2: "label2" } 입니다. 다음은 예입니다.

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

@faucct 가 제안한 것이 효과가 있는 것 같습니다. 사소한 참고 사항은 jquery 버전을 사용하는 경우 선택한 범위 외부에서 AbstractChosen에 액세스할 수 없으므로 해당 파일을 선택한 범위 내부에 추가하거나 선택한 js 파일을 수정해야 한다는 것입니다. AbstractChosen 및 SelectParser를 전역 범위로 이동합니다. 또 다른 문제는 열린 목록(선택한 div가 생성함)을 업데이트하지만 실제 "선택 필드"는 업데이트하지 않으므로 선택 항목에 없는 경우 선택한 옵션이 오류를 던질 수 있다는 것입니다. 또한 주의할 점은 작성한 문자열이 반환된 결과도 필터링하는 데 사용된다는 것입니다. 또한 무언가를 입력할 때마다 작동하므로 전화를 걸지 않도록 수동으로 제어할 수 있습니다.

다른 확장 프로그램은 다음과 같습니다. https://github.com/meltingice/ajax-chosen

그것은 꽤 잘 작동하지만 현재 버전이 손상되었습니다. 약간의 수정이 있습니다. 선택한 라이브러리가 내부 CSS 이름을 변경했기 때문에 "chzn"을 "chosen"으로 바꿔야 합니다. 마지막으로 변경해야 할 것은 " listz:updated " 대신 " selected:updated "를 트리거하는 것입니다. Readme에서 CSS의 버그를 수정하라고 요청하지만 최신 버전에서는 이미 수정되었으므로 그렇게 할 필요가 없습니다. 또한 몇 가지 유용한 옵션을 설정할 수 있으며 사용자가 계속 작성하면 시스템은 보류 중인 호출도 취소합니다.

이것은 내 여행이었습니다 :) 도움이되기를 바랍니다.

선택한 원격 데이터 소스를 처리하는 플러그인을 만들어 이 문제를 해결했습니다. 모두 즐기시기 바랍니다.

selected-remote-source (https://github.com/westonganger/chosen-remote-source)

전체 코드는 200줄 미만의 코드로 상당히 간단합니다.
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

Chosen에서 패치가 필요한 유일한 부분은 다음과 같습니다.

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH