jquery를 사용하여 서버에서 텍스트 상자로 자동 채우기

Question

MVC 응용 프로그램 .net을 개발 중입니다.

"제품"이라는 텍스트 상자가 있습니다. 나는 JQuery와 및 아약스 여기

를 사용하여 서버의 목록과 텍스트 상자를 autopoulate해야하는 코드입니다 :이 텍스트 상자에

@Html.TextBoxFor(model=>model.Products,new {@id = "Products"}) 

, 나는 아약스에 의한 컨트롤러의 액션을 호출하고 얻을 필요 자료. 내가 바인딩하고 조치를 "검색"을 타격 한 후, 페이지로드

1. : 페이지로드에

   $('#Products).autocomplete() 
   { 
       alert('kl'); 
       AutoCompleteDetails() 
   } 
   
   function AutoCompleteDetails() 
   { 
       var url = '@Url.Action("Search", "Student")'; 
       href = url; 
   
       $.ajax({ 
         url: href, 
         dataType: "json", 
         data: AutoDetails, 
         type: "POST", 
         context: this, 
         success: function (data) { 
   
   } 
   

   는 제어 내가 여기이 의심이 학생 컨트롤러의 검색 행동, 을 타격 모델 값은 페이지로 다시 돌아 오지만이 값은 "제품"이라는 텍스트 상자에 제안 사항과 같은 드롭 다운으로 표시되지 않습니다.

2. 페이지로드 후 "KL"을 입력하고 "Student "컨트롤러가 칼레를 얻지 못한다. 디.

의견이 있으십니까?

Answer 1

는 다음과 같은 샘플로 시험 인쇄를 해보십시오, 나는이 도움이 될 것입니다 생각 :

$("#Products").autocomplete({ 
    source: 
    function (request, response) { 
     $.ajax({ 
      url: href, // Search Url Goes Here 
      dataType: "json", 
      cache: false, 
      data: { 
       term: request.term 
      }, 
      success: function (data) { 
       response(data); 
      } 
     }); 
    }, 
    minLength: 1, 
    select: function (event, ui) { 
     if (ui.item) { 
      $("#Products").val(ui.item.value); 
     } 
    } 
}); 

Answer 2

우리 프로젝트에서 같은 것을 구현했습니다.

나를 내가이에서 뭐하는 거지 것은 내가 드롭 다운으로 작동 할 수 있도록하기 위해 노력하고 있다는 점이다

@Html.TextBoxFor(m => m.Filter.MyData) 
           <span> 
            <img onclick=" openAutoCompleteBox() " alt="click" src="../Content/images/dropdown_arrow.gif" 
             height="19px" style="cursor: pointer;"></span> 

당신에게 예를 보여 드리죠, 그래서에 onclicking, 그것의 측면에 이미지를 추가, 그것은 것입니다 openAutoCompleteBox를 호출하십시오.

페이지로드

1. , 내가 "제품"

를 페이지로 돌아 모델 값을 바인딩하고 있지만,이 값이 호출 텍스트 상자의 제안으로 드롭 다운으로 간주하지 않는 조치를 "검색"타격 후 우리가 한 일이는 동안 나는이 작업에서 입력 "KL"를 탭하면, 우리는 "페이지로드 후 클라이언트 측에만

1. 에 값을 검색합니다 페이지로드 만 자동 완성 플러그인에서 값을로드 한 "학생"검색 컨트롤러가 호출되지 않습니다.

당신은 자동 완성 플러그인 내 구현이 귀하의 요구 사항에 일치하지만 난 문자 다음에 또 다시 컨트롤러를 호출하면 내가 확실하지 오전이

처리됩니다로서, 컨트롤러를 호출 할 필요가 없습니다 프로덕션 서버에 추가로드를줍니다. 정적 인 값을 가지고 있다면 페이지가로드 될 때로드 할 것을 제안 할 것입니다. 동적 인 경우 접근 방식이 좋습니다.OpenAutoComplete

var sState = $(".jsonSuggestResults").is(":visible"); 

    function openAutoCompleteBox() { 

     if (sState) { 
      $(".jsonSuggestResults").hide(); 
      sState = false; 
     } else { 
      var valCrime = $("#Filter_dropdown").val(); 
         sState = true; 
     } 
    } 

Answer 3

난 당신이 jQueryUI 자동 완성 플러그인을 사용하는 것이 제안에 대한

업데이트 코드, 나는 매우 긴 시간과의 간단하고 재미를 위해 그것을 사용하고있다. 여기에 URL이 있습니다 jQueryUI autocomplete

추가 기능을 확인하십시오.