2011-11-03 3 views
0

웹 서비스 (SPServices 사용)를 호출하여 모든 항목을 배열로 가져온 다음 해당 배열을 자동 완성 호출에서 사용하고 있습니다. 위대한 작품이지만, 몇 가지 질문/문제가 있습니다.jQuery AutoComplete vs Combobox

  1. 선택 목록에없는 값을 사용자가 선택하지 못하게하려면 어떻게합니까? 나는 콤보 상자가 이것을한다고 생각하지만 페이지 전체 목록을로드하고 싶지는 않습니다. # 2로 연결됩니다 ...

  2. 나는 수천 개의 항목을 포함하는 선택 목록을 사용하고 있습니다. 그것 (현재 몇백), 내가 자동 완성으로 수집하는 것부터 모든 선택 값을 배열로로드 한 다음 그 값을 사용하여 선택합니다. 그 맞습니까? 이 문제를 해결할 더 좋은 방법이 있습니까? 부분적으로 입력 된 단어로 웹 서비스를 호출하고 모든 항목이 아니라 결과 만 배열 할 수 있습니까? 이것이 자동 완성 또는 콤보 박스 이외의 고유 한 솔루션입니까?

감사합니다, 그래서 여기

+0

jQueryUI 자동 완성 기능을 사용하고 있습니까? –

+0

예, object.autocomplete –

답변

1

다윗은

키를 백업에서 새로운 용어와 내 웹 서비스를 호출 한 다음 자동 완성에 반환 된 결과를 넣어 ... 내가 무슨 짓을했는지. 또한 결과가 캐싱됩니다.

사용자가 계속해서 값을 배열에 포함했는지 확인하여 값이 엉망이되지 않도록합니다.

function setVendorLookup() { 
    var term = $(this).val().toLowerCase(); 
    if (term.length > 2) { 
     if (vendors.join(" ").toLowerCase().indexOf(term) == -1) { //some caching 
      vendors = []; 
      $().SPServices({ 
       operation: "GetListItems", 
       listName: "Yellow Pages", 
       async: false, 
       CAMLViewFields: "<ViewFields><FieldRef Name='VENDOR_ID'/><FieldRef Name='NAME1'/><FieldRef Name='CITY'/><FieldRef Name='STATE'/></ViewFields>", 
       CAMLQuery: "<Query><Where><Or><Contains><FieldRef Name='VENDOR_ID' /><Value Type='Text'>" + term + "</Value></Contains>" + 
        "<Contains><FieldRef Name='NAME1' /><Value Type='Text'>" + term + "</Value></Contains></Or></Where></Query>", 
       completefunc: function (xData, Status) { 
        $(xData.responseXML).find("[nodeName='z:row']").each(function() { 
         vendors.push($(this).attr("ows_VENDOR_ID") + " - " + $(this).attr("ows_NAME1") + ", " + $(this).attr("ows_CITY") + ", " + $(this).attr("ows_STATE")); 
        }); 
       } 
      }); //SPServices 
     } 
     $(".vendor").autocomplete({ 
      source: vendors, 
      minLength: 3 
     }); 
    } else 
     vendors = []; 

} 

function validate() 
{ 
     if (jQuery.inArray($(".vendor").val(), vendors) == -1) { 
      myAlert("Validation Error", "Please select a valid vendor"); 
      return false; 
     } 
}