쉘 명령 행 완료와 비슷한 TAB 완성/자동 완성 기능을 갖춘 Ajax 자동 완성 (또는 자동 제안)?

저는 AJAX autocomplete/autosuggest 기능을 구현하고 있습니다. 사용자가 입력 한 것과 유사한 일반적인 제안 사항을 표시하고 싶을뿐만 아니라 사용자가 타이핑을 저장하기 위해 부분 완료를 할 수 있도록하고 싶습니다.쉘 명령 행 완료와 비슷한 TAB 완성/자동 완성 기능을 갖춘 Ajax 자동 완성 (또는 자동 제안)?

그래서 "녹색 사과", "녹색 배", "녹색 과일", "푸른 하늘", "푸른 물", "푸른 웨이크"에 내 사전에 다음 값이 있다고 상상해보십시오.

사용자가 "g"를 입력하면 제안 사항은 "녹색 사과", "녹색 배", "녹색 과일"이어야하며 사용자가 Tab 키를 눌러 검색어를 업데이트하도록합니다. "녹색"이면 "a"를 입력하면 "녹색 사과"가 완성됩니다.

저는 리눅스 쉘 명령 행 완료 이후에이를 모델링하려고합니다.

이 작업을 수행하는 컨트롤/스크립트를 권장 할 수 있습니까? 또는 기존 컨트롤의 수정/사용자 지정?

출처

2009-12-03 Alex Black

지금 당장 철저한 해결책을 생각할 수는 없지만 jQuery가 시작하는 좋은 방법 일 수 있다고 생각합니다. 특정 완성 된 키 스트로크 (TAB)에 항상 청취자를 지정할 수 있기 때문에 자동 완료가 그리 어렵지 않습니다. 그래서 제 개인적인 대답은 '예'입니다. –

나는 그것을 할 수있는 방법을 제안 할 수 있지만 그것을 할 수있는 컨트롤을 모른다. –

흠, 사용자 정의 할 수있는 컨트롤은 어떨까요? 자신의 기본 자동 완성 기능을 사용하는 것이 그리 어렵지는 않을 것이라고 확신하지만, 걱정되는 모든 경우는 다음과 같습니다. –

찾을 수 자동 완성이 특정 유형의 인기 자동 완성 플러그인에서 지원되지 않습니다 (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) 
}

Test page here - 정상 브라우저에서 작동합니다. prototype.js, jQuery 또는 기타에서 수신하는 IE 사용 이벤트를 지원합니다.

출처

2009-12-13 19:36:26 mislav

의 요청에 따라 제안 된 후보자에서 완료를 지원하지 않습니다. 좋은 스크립트. –

테스트 페이지를 더 이상 사용할 수 없습니다. :( –

jQuery를 사용하는 경우 위대한 플러그인은 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/입니다. css를 사용하여 드롭 다운 상자를 숨기고 탭 자동 완성 기능을 그대로 둡니다. 나는 자신을위한 jQuery 플러그인을 간단하다고 생각

... 탭 키를 누르면 탭 키 를 수신 의 라인을 따라

, 트리거 탭 : input.autotab 누르십시오

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

바인딩 input.autotab의 탭 : (AN 각 루프 ... 포커스 == 사실 등이있는 경우) 프레스 이벤트 자바 스크립트 배열 조회 또는 XHR 요청 (AJAX) 중 어느 하나에, 그 설정된 입력 된 값을 반환 된 데이터로 반환합니다. 당신의 자동 제안 스크립트에서

$('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; }); 
     } 
    });

, 값이 데이터베이스에 두 번 이상 일치하면 (첫 번째 요소가 일치 인덱스 요소에서 중지, 인덱스와 루프를 사용한다) 그래서를 작성하고 반환 그 시점까지의 가치

출처

2009-12-09 06:13:47 CodeJoust

가장 간단한 방법은 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

출처

2009-12-13 14:37:15

코드를 확인하지는 않았지만 적어도 [해당 웹 페이지] (http://docs.jquery.com/Plugins/Autocomplete)는 – cfi

쉘 명령 행 완료와 비슷한 TAB 완성/자동 완성 기능을 갖춘 Ajax 자동 완성 (또는 자동 제안)?

답변

관련 문제