jQuery Combobox/자동 완성을 선택 하시겠습니까?

내가 당신을 오해하고있는 것이 아니라면, Vissu는 하드 코딩 된 옵션 집합이 아닌 원격 위치에서이 목록을 반환하기를 원할뿐입니다. 그것이 맞다면 http://jqueryui.com/demos/autocomplete/#remote를 도울 수있는 동일한 페이지 (다른 앵커이지만 여전히 동일한 데모)에 원격 샘플이 있습니다. 그것이 당신이 의미하는 바가 아니라면 알려주십시오. 감사. – Lance

나는이 말했듯이되었습니다 알고

하지만 jQuery Autocomplete 정확히 당신이 필요로 할 것입니다. 자동 완성 기능은 매우 맞춤 설정할 수 있으므로 문서를 확인해야합니다. 당신이 자바 스크립트에 익숙하다면 이것을 해결할 수 있어야합니다. 내가 전에 한 번 해보았으나, 몇 가지 지침을 줄 수는 없지만, 나 자신도 자바 스크립트에 정통하지는 않으므로주의해야한다.

내가해야 할 일은 페이지에서 작업하는 간단한 자동 완성 텍스트 필드를 얻은 다음 거기에서 사용자 정의 할 수 있다고 생각합니다.

자동 완성 위젯은 JSON 데이터를 '원본 :'옵션으로 허용합니다. 따라서 앱을 설정하여 20 개의 최상위 카테고리와 하위 카테고리를 JSON 형식으로 생성해야합니다.

다음으로 알아야 할 사항은 사용자가 텍스트 필드에 입력하면 자동 완성 위젯이 "term"이라는 매개 변수에 입력 된 값을 보냅니다.

그럼 먼저 설정 사이트를이 같은 URL에서 JSON 데이터를 제공하는 가정 해 봅시다 :

/categories.json

그런 다음 자동 완성 소스 : '/categories.json 소스'옵션이 될 것입니다.

때와 같은 텍스트 필드에 사용자 유형 '첫 CATA ... "과 같이"기간 "파라미터 값을 전송하기 시작한다 자동 완성 위젯 :

/categories.json?term=first-cata

이 뜻 'first-cata'과 일치하는 항목으로 필터링 된 위젯으로 JSON 데이터를 반환하며, 이는 자동 완성 제안으로 표시됩니다.

프로그래밍 내용을 잘 모르겠지만 '용어'매개 변수가 일치하는 방식을 지정할 수 있습니다. 따라서 원하는대로 단어의 중간에 단어가 일치하도록 단어를 사용자 정의 할 수 있습니다. 예를 들어 사용자가 '또는'을 입력하면 '또는 ts'와 일치하는 코드를 작성할 수 있습니다.

마지막으로 카테고리 이름을 선택할 수 있지만 자동 완성 위젯이 이름이 아닌 카테고리 ID를 제출하게하려는 댓글을 작성했습니다.

숨겨진 필드로 쉽게 수행 할 수 있습니다. 이것은 jQuery 자동 완성 문서에 표시된 것입니다.

사용자가 범주를 선택하면 JavaScript가 숨겨진 필드를 ID로 업데이트해야합니다.

이 답변은 매우 자세하게 설명되어 있지 않습니다. 그러나 그 이유는 주로 프로그래밍하려는 내용이 확실하지 않기 때문입니다. 그러나 위의 내용은 올바른 방향으로 사용자를 안내해야합니다. 알아야 할 점은 당신이이 도구를 배우는데 시간을 할애한다면,이 위젯으로 원하는 모든 커스터마이징을 실제로 할 수 있다는 것입니다.

이것은 광범위한 스트로크이지만 레일스 앱에서 원하는 것과 비슷한 것을 구현했을 때 작성한 몇 가지 노트에 대해서는 look here 수 있습니다.

희망이 도움이되었습니다.

출처

2010-07-11 15:03:20 Oscar

[편집] 사랑스러운 chosen jQuery plugin이 내 관심사로 구입되었으며, 나에게 좋은 대안 인 것처럼 보입니다.

jQuery 자동 완성을 사용하려는 경우 combobox example을 기본값을 지원하도록 확장하고 툴팁을 제거하여 예상되는 동작을 줄 수 있습니다. Try it out.

(function ($) { 
    $.widget("ui.combobox", { 
     _create: function() { 
      var input, 
       that = this, 
       wasOpen = false, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       defaultValue = selected.text() || "", 
       wrapper = this.wrapper = $("<span>") 
       .addClass("ui-combobox") 
       .insertAfter(select); 

      function removeIfInvalid(element) { 
       var value = $(element).val(), 
        matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"), 
        valid = false; 
       select.children("option").each(function() { 
        if ($(this).text().match(matcher)) { 
         this.selected = valid = true; 
         return false; 
        } 
       }); 

       if (!valid) { 
        // remove invalid value, as it didn't match anything 
        $(element).val(defaultValue); 
        select.val(defaultValue); 
        input.data("ui-autocomplete").term = ""; 
       } 
      } 

      input = $("<input>") 
       .appendTo(wrapper) 
       .val(defaultValue) 
       .attr("title", "") 
       .addClass("ui-state-default ui-combobox-input") 
       .width(select.width()) 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        autoFocus: true, 
        source: function (request, response) { 
         var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            label: text.replace(
            new RegExp(
             "(?![^&;]+;)(?!<[^<>]*)(" + 
             $.ui.autocomplete.escapeRegex(request.term) + 
             ")(?![^<>]*>)(?![^&;]+;)", "gi" 
            ), "<strong>$1</strong>"), 
            value: text, 
            option: this 
           }; 
         })); 
        }, 
        select: function (event, ui) { 
         ui.item.option.selected = true; 
         that._trigger("selected", event, { 
          item: ui.item.option 
         }); 
        }, 
        change: function (event, ui) { 
         if (!ui.item) { 
          removeIfInvalid(this); 
         } 
        } 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 

      input.data("ui-autocomplete")._renderItem = function (ul, item) { 
       return $("<li>") 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      }; 

      $("<a>") 
       .attr("tabIndex", -1) 
       .appendTo(wrapper) 
       .button({ 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
        text: false 
       }) 
       .removeClass("ui-corner-all") 
       .addClass("ui-corner-right ui-combobox-toggle") 
       .mousedown(function() { 
        wasOpen = input.autocomplete("widget").is(":visible"); 
       }) 
       .click(function() { 
        input.focus(); 

        // close if already visible 
        if (wasOpen) { 
         return; 
        } 

        // pass empty string as value to search for, displaying all results 
        input.autocomplete("search", ""); 
       }); 
     }, 

     _destroy: function() { 
      this.wrapper.remove(); 
      this.element.show(); 
     } 
    }); 
})(jQuery);

출처

2013-03-06 12:06:18 mcNux

jquery 사이트에있는 기능이 작동하지 않습니다. 감사. – eggie5

이것은 페이지에서 최고입니다. 고맙습니다! – dotancohen

'Chosen'은 정말 대단합니다. 고마워요! – peter

이 기능은 저에게 효과적이며, jQuery의 예제를 수정하여 더 적은 작업을하고 있습니다.

jQuery ex처럼 내 페이지에서 select 개체를 정의했습니다. 나는 텍스트를 가져 와서 그것을 배열로 밀어 넣었다. 그런 다음 입력 소스 자동 완성에 소스로 배열을 사용합니다. tadaa.

$(function() { 
    var mySource = []; 
    $("#mySelect").children("option").map(function() { 
     mySource.push($(this).text()); 
    }); 

    $("#myInput").autocomplete({ 
     source: mySource, 
     minLength: 3 
    }); 
}

출처

2014-01-26 00:54:49

jQuery Combobox/자동 완성을 선택 하시겠습니까?

답변

관련 문제