jQuery 자동 완성 부분의 텍스트 영역을 개선하십시오.

Question

사용자가 @ 기호를 입력 한 후 자동 완성이 실행되는 텍스트 영역이 있습니다. 트위터가 사용자 이름 자동 완성을 처리하는 방식과 비슷합니다. jQuery autocomplete 및 caret 플러그인을 사용합니다.

일반적으로 자동 완성 기능은 전체 텍스트 입력란을 사용자가 선택한 항목으로 바꿉니다. 이 경우 @ 뒤에있는 부분 만 바꿉니다. 그것은 텍스트에 여러 개의 @ 기호가있는 경우에도 작동합니다.

내 CoffeeScript는 녹슬었기 때문에 누군가 개선 할 수 있는지 궁금합니다. 특히 검색 및 소스 메서드 사이의 현재 커서 위치 같은 변수를 전달하는 방식을 좋아하지 않습니다.

$('.myTextArea').autocomplete 
search: (event,ui) -> 
    # Figure out where in the text we are currently typing 
    # Cursor position: 
    target = $("#" + event.target.id) # I'm sure there's a more elegant solution 
    window.cursor_pos = target.caret() 
    window.word = getWordAt(event.target.value, window.cursor_pos); 

    if window.word[0] == "@" 
    $('#spinner').show() 
    else 
    return false 
open: (event, ui) -> 
    $('#spinner').hide() 
focus: (event, ui) -> 
    return false 
source: (request, response) -> 
    $.getJSON("https://stackoverflow.com/users/autocomplete_username", { term: window.word.slice(1) }, response); 
select: (event,ui) -> 
    start_of_word = window.cursor_pos - window.word.length + 1 
    start = event.target.value.substring(0, start_of_word) 
    ending = event.target.value.substring(window.cursor_pos, event.target.value.length) 

    event.target.value = start + ui.item.id + ending 
    target = $("#" + event.target.id) 
    target.caret(start_of_word + ui.item.id.length) 

Answer 1

좋은 본능 재 : window에 검색 및 소스 부착 것들 사이에 커서 위치를 통과하는 죽음에 이르게! :) 지역적으로 범위가 지정된 병은 잘 작동하고보다 안전합니다 (아래 참조).

일부 브라우저에서 정의되지 않은 word[0]을 한 눈에 보았습니다. 문자열 char 액세스의 경우 실제로는 브라우저 간 친화적 인 charAt()을 사용해야합니다. 여기에 var scoping 외에도 변경을했습니다.

cursor_pos = word = null 

$('.myTextArea').autocomplete 
    search: (event,ui) -> 
    # Figure out where in the text we are currently typing 
    # Cursor position: 
    target = $("#" + event.target.id) # I'm sure there's a more elegant solution 
    cursor_pos = target.caret() 
    word = getWordAt(event.target.value, cursor_pos); 

    if word.charAt(0) == "@" 
     $('#spinner').show() 
    else 
     return false 
    open: (event, ui) -> 
    $('#spinner').hide() 
    focus: (event, ui) -> 
    return false 
    source: (request, response) -> 
    $.getJSON("https://stackoverflow.com/users/autocomplete_username", { term: word.slice(1) }, response); 
    select: (event,ui) -> 
    start_of_word = cursor_pos - word.length + 1 
    start = event.target.value.substring(0, start_of_word) 
    ending = event.target.value.substring(cursor_pos, event.target.value.length) 

    event.target.value = start + ui.item.id + ending 
    target = $("#" + event.target.id) 
    target.caret(start_of_word + ui.item.id.length)