2009-07-29 7 views
1

jquery 자동 완성 플러그인을 사용하고 있으며 사용자가 입력 한 특정 키를 기반으로 자동 완성을 수동으로 트리거하려고합니다. 자동 입력을 즉시 입력에 바인딩하려고하므로 사용자가 특정 키를 입력하여 "검색 할 데이터를 입력하고 있습니다"라는 트리거를 입력하면 자동 완성이 일치를 검색 할 수 있습니다. 중간에있을 수 있습니다. 반드시 시작 부분에있는 것은 아닙니다.jquery keypress 이벤트로 특정 키 코드에서만 자동 완성 트리거

입력에 키 누르기 이벤트를 바인딩하고 있습니다. 사용자가 "="와 같은 특정 키를 입력하면 배열의 모든 요소를 ​​표시하려고합니다. 그런 다음 사용자가 문자를 입력하면 해당 문자의 배열에서 일치하는 옵션이 자동 완성됩니다. 이것은 Excel에서 일어나는 일을 모방하려고 시도하는데, 사용자가 equals 키를 눌렀을 때 "="키가 입력의 첫 번째 요소 일 필요는 없다는 것을 제외하고는 사용할 수있는 함수를 볼 때마다 자동 완성을 수행해야합니다. = "옵션이 선택 될 때마다 해당 AC를 누르고 바인드 해제합니다.

var array1 = ['one','two','three']; 

$.input1.bind('keypress', function(event) { 
    var keyCode; 
    if (event.keyCode > 0) { 
    keyCode = event.keyCode; 
    } else if (typeof(event.charCode) != "undefined") { 
    keyCode = event.charCode; 
    } 

    if (String.fromCharCode(keyCode) == '=') { 
    $.input1.unbind('keypress'); 

    $.input1.autocomplete(array1); 

    $.input1.blur(); 
    $.input1.focus(); 
    e = $.Event('keydown'); 
    e.which = keyCode; 
    $.input1.trigger(e); 
    } 

}); 

내가 사용자가 일치 수있는 텍스트 앞에 아무것도 입력 된 경우, 트리거 할 수있는 자동 완성을 얻을하더라도, 그것은 때문에 이전의 텍스트와 일치하지 않습니다. 따라서 사용자가 "abd ="를 입력하면 자동 완성은 "="뿐만 아니라 q 매개 변수로 "abb ="를 얻게됩니다.

어떤 도움도 정말 고맙습니다.

답변

4

자동 완성 플러그인이 검색을 수행하기 전에 입력란의 값을 필터링 할 수 있어야합니다. 플러그인을 보면 플러그인이 내장되어있는 것처럼 보이지 않지만 플러그인을 추가하면 플러그인이 멈추지 않습니다.

는 그런 다음 기능이 추가 플러그인 코드를 열고 기능 lastWord(), 라인 261에 볼을 찾을 : 그래서 lastWord 기능이 보일 것입니다

if (options.formatValue){ 
    value = options.formatValue(value); 
} 

같은 :

function lastWord(value) { 
    if (options.formatValue){ 
     value = options.formatValue(value); 
    } 
    if (!options.multiple) 
     return value; 
    var words = trimWords(value); 
    return words[words.length - 1]; 
} 

는 그런 다음 jQuery 코드에서이 같은 일을 할 수 있습니다

$(document).ready(function(){ 
    var array1 = ['one','two','three']; 
    $('#test').autocomplete(array1,{ 
       formatValue: function(value){ 
        if (value.search('=') == -1) return ''; 
        return value.substring(value.search('=')+1); 
       } 
    }); 
}); 

이 당신을 드릴 것입니다 검색 전에 필드의 값을 필터링하고 형식을 지정하십시오. 값에 "="문자가 있으면 검색 만하고 검색하지 않으면 빈 문자열을 반환합니다. 그것의 발견하면 그것과 그 전에 모든 것을 제거하고 사용자가 그 뒤에 입력하는 것을 반환합니다.

+0

안녕하세요. petersendidit, 답장을 보내 주셔서 감사합니다. 2 일간 멍청한 짓을 한 후에 나는 플러그인 자체에 일종의 커스터마이즈가 있어야만한다고 생각했다. 내 요구 사항은 실제로 조금 더 까다로워졌습니다. 함수에는 매개 변수가 있으며 각 매개 변수는 다른 배열에 대해 자동 완성됩니다. 따라서 "functionX"라는 함수는 "="또는 "[param]"형식으로 나타나는 "function()"형식을 갖습니다. 사용자가 "["키를 누르면 자동 완성이 해당 매개 변수 배열에서 검색되도록 변경됩니다.따라서 사용자가 "abc ["를 타이핑하면 다른 하나를 볼 것입니다. –

+0

각 함수에는 2 개의 형식이 있으므로 1 개의 형식은 functionName()과 같습니다. 사용자가 "="에 도달하면 모두 표시되고 다른 형식은 enclosureStart char 및 enclosureEnd char입니다. 따라서 사용자가 "["키를 누르면 결과가 나타나지 않지만 다음 키에서는 함수의 매개 변수 자동 완성 결과를 확인해야합니다. 그게 말이 되니? 내가 더 명확하게 할 수 있다면 당신에게 상세한 사용 사례를 이메일로 보낼 수 있습니다 ... 다시, 도움을 많이 주셔서 감사합니다! –

1

당신은 코드의 두 번째 줄을 추가하여 autocomplete.js을 수정할 수 있습니다 다음

... 
    .bind("keydown.autocomplete", function(event) { 
+ self.options.keydownEvent=event; 
    if (self.options.disabled) {... 

당신이 VAR의 이벤트가있다 기억이

source:function(){ 
var event=this.options.keydownEvent; 
... //Handling the event 

처럼 SORCE 기능 내부 keydownEvent 참조 어느 분야. 예를 들어, event.which가 13이면 Enter 키를 누 른 것입니다. 희망이 도움이됩니다.