2010-12-14 3 views
1

ASP.net MVC 2에서 자동 완성 필드를 생성 중입니다. 입력 필드가 회전 만되고 자동 완성 데이터가 없거나 "결과 없음"메시지가 나타나는 문제입니다.JQuery 자동 완성 결과가 나타나지 않습니다.

LIKE 문을 사용하여 데이터베이스에서 LastNames를 검색하는 검색 컨트롤러가 있습니다. 이 컨트롤러는 아래 JavaScript 함수에서 호출됩니다.

$('#author').autocomplete('~/edit/search.mvc', { 
    delay: 200, 
    minChars: 2 
}); 

이 모든 것이 정상적으로 작동합니다. 검색 컨트롤러로 디버깅 할 수 있으며 검색 텍스트 (q)를 전달하고 결과를 return 문으로 가져 오는 중입니다. 컨트롤러가 아래에 있습니다.

//Method to return author searches 
public JsonResult Search(string q) 
{ 
    var locateFacultyDto = new LocateFacultyMemberDto() { SearchText = q }; 
    var result = _facultyMemberModel.LocateFacilityMembersByLastNameLike(locateFacultyDto, 10); 

    var lastNames = new List<string>(); 

    foreach (var facultyMember in result.FacultyMembers) 
    { 
     lastNames.Add(facultyMember.LastName); 
    } 


    return Json(lastNames, JsonRequestBehavior.AllowGet); 
} 

그러나 HTML (스파크) 페이지에는 결과가 표시되지 않습니다. 간단한 텍스트 입력이 있습니다.

<input id="author" type="text" /> 

아이디어가 있으십니까? 검색 컨트롤러의 끝 부분 이상을 디버깅 할 수는 없지만 모든 부분이 정상적으로 처리 될 것입니다.

+0

ASP에서 도움을받을 수 없지만 Chrome/FF에서 디버거를 사용하여 스크립트가 AJAX를 통해 실제로 전달되는 것을 확인해 보았습니까? – Fred

답변

1

OK, 나는 위의 다음 게시물에 대한 감사 의견을 그것을 알아 냈 :

http://blogs.msdn.com/b/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx

그것을 다른 사람을 도움이 경우 결과 코드를 게시.

자바 스크립트 : '편집'컨트롤러 (아래 세부 정보)에서 '검색'방법을 호출합니다. "Parse"함수를 추가하는 것이 위의 링크에서 설명한 열쇠였습니다.

트릭은이 데이터를 자동 완성 기능이 예상하는 형식으로 변환하는 것입니다. 로컬 데이터를 사용하는 경우 자동 완성은 문자열 배열을 필요로합니다. 데이터가 JSON 객체 형식이기 때문에 parse 옵션을 사용하여 JSON 객체를 자동 완성 함수가 작동 할 수있는 데이터로 포맷합니다.

구문 분석 기능을 아주 잘 설명되어 있지 않습니다하지만 기본적으로 우리 JSON 객체를 가지고 세 개의 필수 부분으로 구성 객체의 배열을 반환합니다

  1. 데이터 :이 내 JSON에서 전체 항목입니다 개체 : { "ID"13 "이름" "TEST3", "카운트"1}

  2. 값 : TEST3

  3. 결과 :이 I 표시 원하는 값은이 값이고 태그를 선택한 후 입력 (txtStoryTags)에 추가하고 싶습니다. 톰 드롭 다운 : TEST3

완전한 자바 스크립트 기능 :

$('#author').autocomplete('~/edit/search.mvc', { 
    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].Name, result: data[i].Id }; 
    } 
     return rows; 
    }, 
    formatItem: function(row) { 
    return row.Name; 
    }, 
delay: 40, 
autofill: true, 
selectFirst: false, 
highlight: false, 
minChars: 2 
}); 

ASP.net MVC 2 컨트롤러 :

//Method to return author search results as JSON 
    public JsonResult Search(string q) //autocomplete passes a variable 'q' containing the search text 
    { 
     var locateFacultyDto = new LocateFacultyMemberDto() { SearchText = q }; 
     var authors = _facultyMemberModel.LocateFacilityMembersByLastNameLike(locateFacultyDto, 10); 

     var results = new List<Object>(); //All we need is the name and ID 
     //anonymnous object for JSON result. 
     foreach (var author in authors.FacultyMembers) 
     { 
      results.Add(new 
      { 
       Name = (author.LastName + ", " + author.FirstNames), 
       Id = author.Id 
      }); 
     } 

비올라!자동 완성 검색 결과에 사용자 이름을 나열하며 이름을 선택하는 것은 단순히 분야에 ID를 삽입시 :

<input id="author" type="text" /> 

감사합니다 모두!

1

파이어 폭스를 사용하여 Firebug를 사용하여 실제 응답이 돌아 오는 것이 좋습니다.

+0

Search 생성자에서 LastNames를 제거하고 "\ n"으로 구분 된 문자열 배열을 다시 전달하면 올바르게 작동합니다. 이름과 ID를 다시 전달하는 것이 이상적입니다. – Ian

+0

그래서 Firebug가 확인하는 JSON을 반환 할 때만 문제가 발생합니다. OK입니다. NAME과 ID가 포함 된 JSON을 반환하면 이름이 자동 완성에 표시되고 ID가 숨겨진 필드와 같은 곳에 저장되는 방법이 있습니까? – Ian