2012-11-04 9 views
0

나는 사이트에 자동 완성 기능을 추가 할 하나의 텍스트 상자에 대한 정말 좋은 작품 일부 JS 코드를 사용하여이 가이드 발견이 있기 때문에 마지막 tetbox이 작동 여러 자동 완성을 추가하려고 할 때 그러나 http://www.sks.com.np/article/9/ajax-autocomplete-using-php-mysql.html텍스트 상자 포커스 기능 사용?

을 마지막 세트. 여기

은 JS 스크립트의 변수를 설정하는 기능이

function setAutoComplete(field_id, results_id, get_url) 
{ 

// initialize vars 
acSearchId = "#" + field_id; 
acResultsId = "#" + results_id; 
acURL  = get_url; 

// create the results div 
$("#auto").append('<div id="' + results_id + '"></div>'); 

// register mostly used vars 
acSearchField = $(acSearchId); 
acResultsDiv = $(acResultsId); 

// reposition div 
repositionResultsDiv(); 

// on blur listener 
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) }); 

// on key up listener 
acSearchField.keyup(function (e) { 

    // get keyCode (window.event is for IE) 
    var keyCode = e.keyCode || window.event.keyCode; 
    var lastVal = acSearchField.val(); 

    // check an treat up and down arrows 
    if(updownArrow(keyCode)){ 
     return; 
    } 

    // check for an ENTER or ESC 
    if(keyCode == 13 || keyCode == 27){ 
     clearAutoComplete(); 
     return; 
    } 

    // if is text, call with delay 
    setTimeout(function() {autoComplete(lastVal)}, acDelay); 
}); 
} 

하나의 텍스트 상자를 들어 내가 확실하지 오전 여러 텍스트 상자를 사용하는 경우에는이

$(function(){  
setAutoComplete("field", "fieldSuggest", "/functions/autocomplete.php?part="); 
}); 

같은 함수를 호출 할 수 있습니다 방법 I을 이 일을해야만합니다. 시도한 것은 여기에 있지만 작동하지 않았습니다.

$('#f1').focus(function (e) { 
    setAutoComplete("f1", "fSuggest1", "/functions/autocomplete.php?q1="); 
} 
$('#f2').focus(function (e) { 
    setAutoComplete("f2", "fSuggest2", "/functions/autocomplete.php?q2="); 
} 

도움을 주셔서 감사합니다.

+0

왜 요소가 포커스를 얻을 때마다 리스너를 추가합니까? 함수를 사용하여 각 요소를 초기화해야합니다. – sdespont

+0

clearAutoComplete의 기능은 무엇입니까? #auto에 추가 된 div를 지우시겠습니까? 동일한 ID를 가진 여러 필드가 문제를 일으킬 수 있지만 먼저 Bouillou의 제안을 변경해야합니다. 둘째로 작동하지 않는다는 것은 무엇을 의미합니까? JS 콘솔에 오류가 있습니까? 동일한 ID를 가진 중복 된 요소가 있고 요소를 검사하면 결과가 하나로 표시되지만 다른 요소를 표시하려고합니까? 예 :

Felix

답변

0

동일한 페이지의 둘 이상의 요소에서 기능을 사용하려면 클래스를 사용해야합니다. 고정 ID를 삭제하고 해당 클래스의 모든 단일 요소를 대상으로 forEach를 수행하면됩니다.

관련 문제