AJAX AutoComplete (또는 AutoSuggest) 탭 완료/자동 제외 쉘 명령 줄 완료와 유사합니까?

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

문제

AJAX AutoComplete/AutoSuggest 기능을 구현하고 있으며 사용자가 입력 한 것과 유사한 일반적인 쇼 제안을하고 싶을뿐만 아니라 사용자가 부분적으로 완료하여 타이핑을 저장할 수 있도록하고 싶습니다.

따라서 내 사전에 "녹색 사과", "녹색 배", "녹색 과일", "푸른 하늘", "푸른 물", "블루 웨이크"가 있다고 상상해보십시오.

사용자가 "G"를 입력하면 제안은 "Green Apple", "Green Pear", "Green Fruit"이어야하며 사용자 탭이나 쿼리를 "Green"으로 업데이트 할 수 있도록하고 싶습니다. 그런 다음 "A"를 입력 할 수 있고 "Green Apple"으로 완성되었습니다.

Linux Shell 명령 줄 완료 후 이것을 모델링하려고합니다.

이를 수행하는 컨트롤/스크립트를 추천 할 수 있습니까? 아니면 기존 컨트롤의 수정/사용자 정의?

도움이 되었습니까?

해결책

이 특정 유형의 자동 완성은 대중적인 자동 완성 플러그인 (jQuery, Scripty ...)에서 지원되지 않습니다. 일반적으로 원하는 경기를 선택하기위한 드롭 다운 UI를 제공하기 때문입니다.

따라서 우리가 상자 외의 솔루션을 얻지 못했다고 가정 해 봅시다. 부 호. 코딩하는 것이 얼마나 어려울 수 있습니까?

// takes a text field and an array of strings for autocompletion
function autocomplete(input, data) {
  if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) {
    var candidates = []
    // filter data to find only strings that start with existing value
    for (var i=0; i < data.length; i++) {
      if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length)
        candidates.push(data[i])
    }

    if (candidates.length > 0) {
      // some candidates for autocompletion are found
      if (candidates.length == 1) input.value = candidates[0]
      else input.value = longestInCommon(candidates, input.value.length)
      return true
    }
  }
  return false
}

// finds the longest common substring in the given data set.
// takes an array of strings and a starting index
function longestInCommon(candidates, index) {
  var i, ch, memo
  do {
    memo = null
    for (i=0; i < candidates.length; i++) {
      ch = candidates[i].charAt(index)
      if (!ch) break
      if (!memo) memo = ch
      else if (ch != memo) break
    }
  } while (i == candidates.length && ++index)

  return candidates[0].slice(0, index)
}

여기 테스트 페이지 - 일반 브라우저에서 작동해야합니다. IE를 지원하려면 프로토 타입, jQuery 또는 기타의 이벤트 청취.

다른 팁

JQuery를 사용하는 경우 훌륭한 플러그인입니다 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/. CSS를 사용하여 드롭 다운 상자를 숨기고 탭-오토 완성 기능을 켜십시오.

jQuery 플러그인을 직접 만드는 것이 간단하다고 생각합니다 ...

탭 키를 누르면 탭 키를 듣는 줄을 따라 탭 키를 누르면 트리거 탭 : onput.AutoTAB를 누릅니다.

   $(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
       $('input.autotab').trigger('tab:press');
   });

input.autotab의 탭 : javaScript 배열 조회 또는 XHR 요청 (ajax)으로 이벤트 (각 루프 ... 초점 == true 등)를 누르면 해당 입력의 값을 반환 된 데이터로 설정하십시오.

  $('input.autotab').bind('tab:press', function(){
      if (this.hasFocus){
         this.disabled = true;
         $.get('/autotab', { q: $(this).val() }, function(response){
               $(this).val(response);
               this.disabled = false;
         }, function(){ this.disabled = false; });
      }
  });

AutoSuggest 스크립트에서 값이 데이터베이스에서 값이 두 번 이상 일상되면 (인덱스가있는 루프를 사용하고, 첫 번째 요소가 일치하는 인덱스 요소에서 중지) 값을 해당 지점까지 반환하십시오.

가장 간단한 방법은 jQuery와 자동 완성 플러그인을 사용하는 것입니다. stackoverflow html을 보면 동일한 물건을 사용하는 것 같습니다. 대부분의 브라우저에서 매우 잘 작동하는 것 같습니다. 플러그인에는 또한 광범위한 데모가있어 특정 요구 사항을 구현하는 방법을 파악하는 데 도움이됩니다.

플러그인 홈페이지의 빠른 샘플은 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
    $("#example").autocomplete(data);
  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

여기에서 더 많이 찾을 수 있습니다 http://docs.jquery.com/plugins/autocomplete

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