2011-07-29 5 views
2

나는 거의 완성이 필요한 기능을 가지고 있으며 약간의 도움을 찾고 있습니다. 나는 VendorID 속성을 가진 모델을 가지고있다. 이 모델을 사용하여 강력한 형식의 뷰가 있습니다. 사용자가 자동 ​​완성을 사용하는 입력 텍스트 상자에서 공급 업체를 선택할 수 있도록 허용합니다.jquery autocomplete MVC3

이 면도기 구문을 사용하여 모델의 VendorID 속성을보기의 숨겨진 필드에 바인딩합니다.

@Html.HiddenFor(m => m.VendorID) 

사용자 텍스트 상자에 몇 문자 유형 및 항목을 선택, 내가있어 JQuery와 기능은 숨겨진 필드의 값을 설정합니다. 지금까지 모든 것이 잘 작동합니다. 내가 가진 문제는 사용자가 텍스트 상자를 완전히 지우거나 유효하지 않은 텍스트를 입력하는 경우 유효한 값이 선택되지 않았고 숨겨진 필드를 업데이트 할 수없는 경우입니다.

여기 내 jquery는 지금까지 있습니다.

$(document).ready(function() { 
    $('#vendorautocomplete').val($('#VendorName').val()); //prepopulate our vendorautocomplete textbox from our model 
}); 

$(function() { 

    $('#vendorautocomplete').autocomplete({ 

     source: function (request, response) { 
      $.ajax({ 
       url: "/test/vendors", type: "POST", dataType: "json", //Url to our action supplying a list of vendors 
       data: { searchString: request.term, maxRecords: 10 }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { label: item.VendorName, value: item.VendorName, id: item.VendorID }; 
        })); 
       } 
      }); 
     }, 
     select: function (event, ui) { 
      $('#VendorID').val(ui.item ? ui.item.id : 0); //Set our VendorID hidden for model binding 
     } 

    }); 
}); 

내가 선택 유사한 자동 완성 기능에 뭔가를 할 수 기대했다 : 위의 경우에만 흐림을 위해 :, 그러나 그것은 작동하지 않았다. 나는 텍스트 상자의 값을 기반으로 공급 업체의 ID를 조회하기 위해 blur 이벤트를 사용할 수 있다고 생각하지만, 잘못된 지점 이름을 감지하고 숨겨진 필드를 0으로 설정할 수 있어야합니다. 어디에 있는지 모르겠다.

답변

1

스크립트에 다음을 추가하여 원하는 작업을 수행 할 수있었습니다.

잘못된 검색 데이터에 대한

(더 값이 반환)

나는 변경 이벤트는 최고의 solutuion하지만

$(function() { 
     $('#vendorautocomplete').change(function() { 
      if ($('#vendorautocomplete').val() == null || $('#vendorautocomplete').val() === "") { 
       $('#VendorID').val(null); 
       $('#VendorName').val(''); 
      } 
     }); 
    }); 

확실하지 않음에 빈 텍스트 상자를 확인

success: function (data) { 
        var arr = $.map(data, function (item) { return { label: item.VendorName, value: item.VendorName, id: item.VendorID }; }); 
        if (arr.length == 0) { 
         $('#VendorID').val(null); 
         $('#VendorName').val(''); 
        } 
        response(arr); 
       } 

가 작동하고 I 다른 문제로 옮길 필요가있다.