원본 페이지 요청만으로 ASPX에서 자동 완성하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/826641

문제

우리는 너무 많은 요소(200개 이상)가 포함된 선택 목록을 포함하는 ASPX(.NET 2.0) 페이지를 개발 중입니다.

텍스트 상자처럼 작동하지만 자동 완성 제안 기능을 사용하려면 일종의 자동 완성 기능이 필요합니다.

우리는 JQuery를 사용하고 싶습니다.지금까지 우리의 검색에서는 일종의 백엔드 서비스, 추가 요청(AJAX에서) 등이 필요한 자동 완성만 나타났습니다.우리는 페이지 요청을 통해 모든 데이터를 한 번에 전달하는 것을 선호합니다.이상적으로는 선택 목록 항목과 같습니다.

선택 목록을 변환하는 자동 완성 상자가 있나요?아니면 외부 리소스에 액세스할 필요가 없도록 이미 페이지(.NET 2.0이 설치된 ASPX)에 있는 데이터에 자동 완성 기능을 연결하는 방법이 있습니까?

편집하다:포스트백은 제가 찾던 문구가 아니었습니다.원래 페이지 요청과 함께 전달된다는 의미입니다.

편집 2:페이지의 성능이 정상적으로 저하되어야 합니다.시중의 많은 솔루션은 콘텐츠를 '주입'하므로 자바스크립트가 없으면 콘텐츠를 얻을 수 없습니다.200개 이상의 선택 사항이 있을 수 있지만 적어도 거기에는 존재합니다.이것이 선택 목록의 변환이 우리의 이상적인 이유입니다.

도움이 되었습니까?

해결책

사용 jQuery 자동완성 플러그인 Steve Willcock이 제안한대로.일반 선택 상자를 출력한 다음 스크립트에서 이를 텍스트 상자로 바꾸고 옵션 요소인 경우 빌드한 배열로 플러그인을 초기화합니다.따라서 귀하의 데이터는 select:

<select size="1" id="options" name="options">
  <option>Option #1</option>
  <option>Option #2</option>
  <option>Option #3</option>
  <option>Option #4</option>
  <option>Option #5</option>
  <option>Option #6</option>
  <option>Option #7</option>
</select>

...그리고 다음과 같이 변환합니다.

$(function(){
  // execute once the DOM is ready...

  // build array of option texts
  var options = [];
  $("#options option").each(function(){
    options.push($(this).text());
  });

  // build an input field, replace the select with it,
  // and wire up autocomplete.
  $("<input id='options' name='options' type='text'>")
    .replaceAll("#options")
    .autocomplete(options, {autoFill: true});  
});

...JS가 없나요?문제 없습니다. 아직 select.

다른 팁

http://docs.jquery.com/plugins/autocomplete/autocemplete#url_or_dataoptions

JQuery Autcomplete 플러그인은 데이터를 배열로 가져갈 수 있습니다. 배열을 .js로 빌드하는 경우 요구 사항에 맞는 파일을 포함하십시오.

예를 들어, 살펴보십시오 데모 페이지 - "다중 도시 (로컬)"섹션과 그곳에서 사용되는 LocalData.js 파일을 확인하십시오.

여러 타사 컨트롤 (ComponentArt의 WebUI Toolkit에서 사용)이있어 자동 완성 Combobox 기능을 제공합니다.

Ajax 기술을 사용하여 동일한 아이디어를 얻을 수있어 전체 포스트 백을 피할 수 있습니다.

여기의 답변은 매우 도움이되었지만 선택 목록에서 자동으로 작동하는 추가 검색 후이 플러그인을 찾았습니다.

섹시한 콤보 : http://code.google.com/p/sexy-combo/

데모 페이지 : http://phone.witamean.net/sexy-combo/examples/index.html

이것은 약간 적은 작업이 필요합니다.

나는 다른 사람들의 참조를 위해 이것을 문서화하고 싶었습니다. 도와 주셔서 감사합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top