2010-01-08 5 views
0

제 생각에는 jQuery 자동 완성 (bassistance)이 있습니다. 문제는이 물건을 얻지 못하고 있다는 것입니다. MVC 액션은 JSON 데이터를 반환하고 플러그인은이를 잘 읽고 필터는 잘 작동합니다. 결과를 나열하고 드롭 다운에서 선택할 수 있습니다. 하지만 아무 것도 선택하지 않으면 Enter를 누르거나 클릭하여 항목을 선택합니다. 어떻게 든 result() 함수를 연결해야한다고 생각합니다. onItemSelect 옵션을 시도했지만 작동하지 않습니다. 아무 일도 일어나지 않고 result()가 실행되지 않습니다.ASP.NET MVC에서 JQuery 자동 완성보기

결국 사용자가 선택한 항목을 계속해서 목록에 추가 할 수 있어야합니다.

저는 대부분 내 문제가 jQuery 또는 JavaScript 지식이 부족하다고 생각합니다. 나는 결코 그것을 좋아하지는 않지만 지금은 ASP.NET MVC에서 배우기를 강요합니다. 실제로 매우 유용하다고 생각합니다.

이 지금까지 내 코드입니다 .. 포스트 백을 우회 할 수있는 :

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#Products").focus().autocomplete('<%=Url.Action("GetProducts", "Product") %>', { 
     dataType: 'json', 
     parse: function(data) { 
      var rows = new Array(); 
      for(var i=0; i<data.length; i++) { 
       rows[i] = { data:data[i], value:data[i].product_id, result:data[i].product_name1}; 
      } 
      return rows; 
     }, 

     formatItem: function(row, i, n) { 
      return row.product_PrettyId + ' - ' + row.product_name1 + ' (' + row.product_price + ' €) '; 
     },  
     width: 900, 
     minChars: 0, 
     max: 0, 
     mustMatch: true, 
     onItemSelect: result, 
    }); 
}); 

function result(extra) { 
    $("#result").val(extra); 
} 

</script> 

보기 :

<div> 
    <%=Html.TextBox("Products", null, new { style = "font-size: 20px; width: 900px"}) %> 
</div> 
<div id="result"></div> 

또한 내 솔루션은 J 작업 할 필요가 있음을 유의하시기 바랍니다 avaScript가 활성화되고 비활성화되었으므로 최종 솔루션에서 항목을 목록에 추가하기 위해 컨트롤러 작업에 대한 포스트 백 및 기본 게시물을 수행하는 버튼 컨트롤을 제공하고자합니다.

+0

자바 스크립트에 대한 귀하의 느낌을 알고 있지만이를 확인하십시오. Doug Crockford 출신으로이 점을 이해하는 데 도움이됩니다. -> http://www.youtube.com/watch?v=hQVTIJBZook – Dann

답변

0

변경해야 할 유일한 방법은 결과 방법입니다.

function result(extra) { 
    $("#result").append(extra.selectValue); 
} 

선택한 항목 (추가)는 <li>로 내부적으로 저장됩니다. 그렇기 때문에 val()이 아닌 selectValue를 가져와야합니다. 지난 6 개월 동안 JavaScript, JQuery 및 MVC와 씨름 해 왔기 때문에 나는 당신의 고통을 느낍니다.

+1

실은 방금 Firebug에서 오류가보고 된 것을 알았습니다. jquery.autocomplete.min.js에 있으며 그 내용은 다음과 같습니다. s.toLowerCase는 함수가 아닙니다. [이 오류 발생] * /; (function ($) {$. fn.extend ({autocomple ...)) {csub.push (x);}});}} return csub;} else \ n 누구든지 이에 대한 단서가 있습니까? 내가 대답 한 NeilT 답변이 맞습니다. 내 스크립트가 작동합니다. – mare

1

마레, 이쪽을 봐 : http://groups.google.com/group/jquery-en/browse_thread/thread/822a07c9d7d49d35

문제는 데이터가 항상 문자열입니다,하지만 귀하의 경우는 사실이 아니다 제안 자동 완성 - 당신은 JSON을 사용하고 있습니다.

압축되지 않은 autocomplete.js를 사용하고 "s = s.toString();"을 추가하십시오. 스크립트가 실패한 행 바로 앞에 있습니다.

관련 문제