반환되는 레코드에 따라 jQuery 자동 완성 또는 드롭 다운 목록으로 필드 렌더링

비즈니스 요구 사항 : 양식을 업로드하고 외부 데이터베이스에서 가져온 문서에 특성을 할당합니다. 10 개의 양식 필드가 있으며 사용자가 양식의 값을 채우면 다른 필드가 실시간으로 필터링됩니다. 나는. 국가가 "미국"을 선택한 경우 주 /도 필드는 미국 주에서만 허용됩니다.반환되는 레코드에 따라 jQuery 자동 완성 또는 드롭 다운 목록으로 필드 렌더링

UX 과제 :이 필드의 많은 내가 그들을 위해 jQuery를 자동 완성을 사용하므로 가능한 값의 문자 그대로 수백만 시작. 필드가 필터링되면 가능한 옵션 수가 드롭 다운 목록에서 더 잘 처리 될 수있는 숫자로 떨어집니다.

질문 : 옵션의 수가 일정 수 이하가되면 동적 드롭 다운 상자에 jQuery를 자동 완성 필드를 변경하는 방법이 있나요? jQuery 자동 완성 옵션을 살펴 봤지만 사용자가 모두 볼 수 없더라도 100 만 개가 넘는 레코드로 콤보 상자를 채우고 싶지는 않습니다.

출처

2011-09-16 RWL01

자동 완성을위한 콤보 박스 데모가 있습니다 (http://jqueryui.com/demos/autocomplete/#combobox). 그 부분적으로 귀하의 요구 사항을 충족합니까? –

아니요, 처음에는 백만 건의 레코드를 보유 할 수있는 드롭 다운 목록이 여전히 필요하기 때문입니다. – RWL01

scroll에 나는 UI/UX 관점에 대한 문제를 해결 설정할 수 있습니다. 각 필드에 사용할 수있는 옵션 수를 알려주는 백그라운드 함수가 있습니다. 이 정보를 사용하여 프로그래밍 방식으로 minlength 및 delay 옵션을 변경합니다. 나는 또한 focus 이벤트에 대한 함수를 bind/unbind하고 그것을 (thanks @Interstellar_Coder에게) 적절하게 스타일을 지정한다. 이렇게하면 사용자는 드롭 다운 목록과 관련된 즉각적인 응답을 얻을 수 있습니다.

아래는 내가하는 일의 간단한 버전입니다. 나는 버튼 클릭 이벤트를 사용하여 실제 응용 프로그램에서 프로그래밍 방식으로 수행중인 작업을 모방합니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <link href="CSS/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
    <style> 
     ul.ui-autocomplete 
     { 
      height: 100px; 
      overflow: auto; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    script type="text/javascript"> 
     $(function() { 
      var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; 
      $("#tags").autocomplete({ 
       source: availableTags, 
       minLength: 1 
      }); 
     }); 
    </script> 

     <script type="text/javascript"> 
      function acdisplay() { 
       $("#tags").autocomplete("option", "minLength", 1); 
       $("#tags").autocomplete("option", "delay", 300); 
       $('#tags').unbind('focus'); 
      } 

      function ddldisplay() { 
       $("#tags").autocomplete("option", "minLength", 0); 
       $("#tags").autocomplete("option", "delay", 0); 
       $("#tags").bind('focus', function(){ 
        $(this).autocomplete("search", this.value); 
       }); 
      } 
     </script> 
     <div class="demo"> 
      <div class="ui-widget"> 
       <label for="tags">Tags: </label> 
       <input id="tags" /> 
      </div> 
      <input type="button" id="acDisplay" value="AutoComplete" onclick="acdisplay()" /> 
      <input type="button" id="ddlDisplay" value="DropDownList" onclick="ddldisplay()" /> 
     </div> 
    </form> 
</body> 
</html>

출처

2011-09-19 14:34:35 RWL01

당신은 ul 명시 적으로 높이를 제공하기 위해 시도하고이 overflow

ul.ui-autocomplete 
{ 
    height: 100px; 
    overflow: scroll; 
}

출처

2011-09-16 20:50:27

이것은 최종 해결책을 얻는 데 확실히 도움이되었습니다. 감사. – RWL01

반환되는 레코드에 따라 jQuery 자동 완성 또는 드롭 다운 목록으로 필드 렌더링

답변

관련 문제