2013-04-12 3 views
1

나는 이것에 간단한 해결책이있을 것이라고 확신하지만 그것을 찾을 수없는 것 같습니다. DB 검색을 위해 jquery UI 자동 완성 기능을 사용하고 있습니다. 자동 완성 기능은 DB에 존재하는 단어/구문을 제안하여 사용자가보다 나은 검색어를 작성하도록 돕습니다. 필자는 자동 완성을위한 소스를 변경하는 선택 필드를 사용하여 완벽하게 정상적으로 작동하는 다른 테이블을 검색합니다.jquery 사용자 자동 완성 기능을 선택적으로 비활성화하는 방법은 무엇입니까?

선택 항목 중 하나 인 경우 자동 완성 기능을 사용하지 않고 텍스트 필드를 일반 텍스트 필드 기능으로 되돌려 줘야합니다. select.change 함수 내에서 if 문으로 감쌀 수 있다고 생각했지만 예상치 못한 동작이 발생했습니다. 다시 다른 옵션으로 변경하면 자동 완성 기능이 작동하지 않습니다.

가장 좋은 방법은 무엇입니까?

$(function() { 
     var select = $("#selectType"), 
     options = select.find("option"), 
     songSearchField = $("#songSearchField"); 

     var selectType = options.filter(":selected").attr("value"); 

     songSearchField.autocomplete({ 
      source: "/ajax/songLookup.php?selectType=" + selectType, 
      minLength: 2, 
      select: function(e, ui) { 
       e.preventDefault() 
       var searchTerm = ui.item.value; 
       var existingTerms = $("#searchString").val() + searchTerm + ", "; 
       $("#searchString").val(existingTerms); 
       $(this).val(''); 
       }, 
      change: function() { 
       // clear the search field 
       $("#songSearchField").val(''); 
       } 
     }); 

     $("#songSearchField").on("autocompleteclose", function(e, ui) { 
      var existingTerms = $("#searchString").val(); 
      $("#termsDisplay").html("<b>Terms: </b>" + existingTerms); 
     }); 

     select.change(function() { 
      $('#searchString').val(''); 
      $("#songSearchField").val(''); 
      $("#termsDisplay").html(''); 
      $("#content").html(''); 
      selectType = options.filter(":selected").attr("value"); 
      songSearchField.autocomplete("option", "source", "/ajax/songLookup.php?selectType=" + selectType); 

      //// this is where I run into trouble \\\\ 
      if(selectType = 'desc') { 
       songSearchField.autocomplete("disable"); 
      } 
      else { 
       songSearchField.autocomplete("option", "source", "/ajax/songLookup.php?selectType=" + selectType); 
      } 
     }); 
    }); 

다음은 HTML입니다.

<form id="songSearchForm"> 
     <input type="text" name="songSearchField" id="songSearchField" /><br /> 
     <select name="selectType" id="selectType"> 
      <option value="keyword">Keyword Search</option> 
      <option value="desc">Song Description Search</option> 
      <option value="title">Song Title Search</option> 
     </select> 
     <input type="hidden" name="searchString" id="searchString" value="" /> 
     <p id="termsDisplay"></p> 
     <input type="submit" name="submit" value="Search" /> 
     <input type="button" name="clear" id="clear" value="Clear Search" /> 
    </form> 
+0

두 개의 다른 입력을 사용하는 방법은 무엇입니까? 일반 입력을 선택하고 '자동 완성'으로 래핑하여 선택한 옵션에 따라 가시성을 전환 하시겠습니까? – raina77ow

+0

작동하지 않으려는 옵션은 무엇입니까? – j08691

+0

Loren이 지적한 명백한 오타를 제외하고 해결책을 찾았습니다. 자동 완성을 비활성화 한 후에는 else 문에서 enable 옵션을 먼저 보내야합니다. – Chapman

답변

2

두 가지 :

if(selectType = 'desc') { 

는 또한

if(selectType == 'desc') { 

수, 당신은 자동 완성 기능을 사용하지 않도록 어디 내가 볼,하지만 난해야 다시 사용하도록 설정 한 곳이 보이지 않습니다. 이것을 시도하십시오 :

if(selectType == 'desc') { 
    songSearchField.autocomplete("disable"); 
} else { 
    songSearchField.autocomplete("enable"); 
    songSearchField.autocomplete("option", "source", "/ajax/songLookup.php?selectType=" + selectType); 
} 

편집 - 원래 소스를 변경하기 위해 라인을 제거했으나 두 번째로 한눈에, 필자는 그렇게 할 필요가 있다고 생각합니다. 물론, 당신은 한번만 필요합니다. 이 성명서 또는 위의 성명서에 기재하십시오.

+0

빙고 - 방금 발견했습니다. 하지만 당신은 금성을 얻는다. 감사! – Chapman

1

어떻게 바로 selectType = options....:

songSearchField.autocomplete("option", "source", "/ajax/songLookup.php?selectType=" + selectType); 

아래,이에 첫 번째 통화를 제거하고 if 문이에 변경에 대한 ...

//// this is where I run into trouble \\\\ 
if(selectType != 'desc') { 
songSearchField.autocomplete("option", "source", "/ajax/songLookup.php?selectType=" + selectType); 
} 

을 OR 나는 단지 주목 이

this :

if(selectType = 'desc') { 

이 있어야한다 :

if(selectType == 'desc') { 
관련 문제