2010-04-22 2 views
1

나는 해결할 수없는 문제에 직면했다. 입력시 jQuery에 autocomplete 플러그인을 사용하고 있습니다.jQuery 자동 완성. 기존 경기를 밝히지 않는다

<tr id="row_house" class="no-display"> 
     <td class="col_num">4</td> 
     <td class="col_label">House Number</td> 
     <td class="col_data"> 
      <input type="text" title="House Number" name="house" id="house"/> 
      <button class="pretty_button ui-state-default ui-corner-all button-finish">Get house info</button> 
     </td> 
    </tr> 

내가이 유일한 id="house" 필드 확신 다음 HTML은 다음과 같이 보인다. 이 필드 앞에있는 다른 입력란은 자동 완성으로 작동하며 기본적으로 동일한 알고리즘 (다른 변수, 다른 데이터, 다른 호출)입니다. 그러면 다음 init으로 작동해야하는 것처럼 작동하지 않는 이유는 무엇입니까? 코드 :

$("#house").autocomplete(["1/4","6","6/1","6/4","8","8/1","8/5","10","10/1","10/3","10/4","12","12/1","12/5","12/6","14","14/1","15","15/1","15/2","15/4","15/5","16","16/1","16/2","16/21","16/2B","16/3","16/4","17","17/1","17/2","17/4","17/5","17/6","17/7","17/8","18","18/1","18/2","18/3","18/5","18/95","19","19/1","19/2","19/3","19/4","19/5","19/6","19/7","19/8","20","20/1","20/2","20/3","20/4","21","21/1","21/2","21/3","21/4","22","22/9","23","23/2","23/4","24","24/1","24/2","24/3","24/A","25","25/1","25/10","25/2","25/4","25/5","25/6","25/7","25/8","25/9","26","26/1","26/6","27","27/2","28","28/1","29","29/2","29/3","29/4","30","30/1","30/2","30/3","31","31/1","31/3","32/A","33","34","34/1","34/11","34/2","34/3","35","35/1","35/2","35/4","36","36/1","36/A","37","37/1","37/2","38","38/1","38/2","39/1","39/2","39/3","39/4","40","40/1","41","41/2","42","43","44","45","45/1","45/10","45/11","45/12","45/13","45/14","45/15","45/16","45/17","45/2","45/3","45/6","45/7","45/8","45/9","46","47","47/2","49","49/1","50","51","51/1","51/2","52","53","54","55/7","66","109","122","190/8","412"], {minChars:1, mustMatch:true}).result(function(event, result, formatted) { 
       var found=false; 
       for(var index=0; index<HChouses.length; index++) //HChouses is the same array used for init, but each entry is paired with a database ID. 
        if(HChouses[index][0]==result) 
        { 
         found=true; 
         HChouseId=HChouses[index][1]; 
         $("#row_house .button-finish").click(function() { 
          QueryServer("HouseConnect","FillData",true,HChouseId); //this performs an AJAX request 
         }); 
         break; 
        } 
       if(!found) 
        $("#row_house .button-finish").unbind("click"); 
      }); 

입력을 시작할 때마다 ("1"버튼을 누르면) 텍스트가 나타나 즉시 삭제됩니다. 드물게 반복되는 프레스 후에 나는 목록을 얻습니다. (그래도 될 수있는 것보다 훨씬 짧습니다.) alt text http://www.freeimagehosting.net/uploads/de3892134d.jpg

그러나 두 번째 숫자를 누르면 모든 것이 다시 사라집니다. 오후 8시 30 분 P.S. Firefox 3.6.3을 개발 용으로 사용합니다.

+0

새로운 jQuery UI 플러그인을 사용해 보겠습니다. 무엇이 표시되는지 확인하십시오. http://jqueryui.com/demos/autocomplete/ – AlexanderMP

+0

jQuery UI 자동 완성 기능이 작동하지만 실제로 작동하지는 않습니다. 목록 외부의 값을 허용하고 일치 된 시퀀스를 강조 표시하여 데이터 서식을 지정하지 않습니다. 이 답변을 기다리는 중입니다. – AlexanderMP

답변

1

값을 선택하면 선택한 값의 ID (QueryServer 여기)를 수행하는 자동 완성 기능을 사용하는 텍스트 상자가있는 것처럼 보입니다. 사실 이것은 동적 인 ajaxy 버전의 <select>입니다. 잘못하면 바로 잡아주세요.

저는 최근에 jQueryUI 자동 완성과 비슷한 것을했습니다. 당신은 행운을 빌어 이것을 시도했다는 당신의 의견을 언급하지만, 두 라이브러리 중 하나를 사용하는 솔루션에 관심이 있다고 가정합니다. 여기에 내가 그것을 할 것입니다 방법은 다음과 같습니다

$("house").autocomplete({ 
    source: [{'id': 1, 'value': '10/1'}, {'id': 2, 'value': '10/3'}, {'id': 3, 'value': '10/4'}, .... 
    minLength: 1, 
    select: function(event, ui) { 
     //input will auto-populate with "value" part 
     $("#row_house .button-finish").click(function() { 
      QueryServer("HouseConnect","FillData",true,ui.item.id);       
     }); 
    }, 
    //this next function is a hack to replicate the "mustMatch" functionality of the bassistance autocomplete plugin 
    change: function (event, ui) { 
     var source = $(this).val(); 
     var found = $('.ui-autocomplete li').text().search(source); 
     if(found < 0) { //no match! 
      $(this).val(''); 
      $("#row_house .button-finish").unbind("click"); 
     }    
    } 
}); 
당신은 다른 곳 source 값을 선언 할 수 있습니다

이 비트 깔끔한 만들 수 있습니다.

희망 하시겠습니까?

+0

답장을 보내 주셔서 감사합니다. 필자는 자동 완성 소스에 간단한 문자열 대신 객체가 전달되는 기능을 찾았습니다. 지금 당장 그 순서로 돌아가서 올바르게 할 시간이 없어요. UI 기능보다 autocomplete 플러그인을 선택한 주요 이유는 텍스트가 문자열의 일치를 나타내도록 강조 표시되고 UI 기능이 실제로 모든 문자열을 허용하는 반면 엄격한 일치 만 적용 할 수 있다는 사실입니다. – AlexanderMP

+0

이것은 사용자가 선택 (선택 상자에 대해 너무 많은 집) 대신 자동 완성을 사용하여 데이터베이스에서 집을 선택할 수 있고, 값이 선택되면 데이터베이스에있는 IS, 선택 옆에있는 버튼 AJAX를 통해 집 정보를 검색하는 함수가 할당됩니다. – AlexanderMP

+0

필자가 예제에서 autocomplete() 함수에 건네 준 'change'매개 변수는 플러그인의 mustMatch 기능을 복제하여 엄격한 일치 만 적용합니다. 당신이 사용하기로 결정한 라이브러리는 모두 서버 사이드 자바 스크립트입니다. 사용자는 자바 스크립트를 사용하지 않도록 선택하고 원하는 데이터를 서버에 제출할 수 있습니다. 텍스트 강조 표시는 좋은 점입니다. – majackson