자동 완성 목록의 값만 허용하도록 AutoCompleteExtender를 설정하는 방법은 무엇입니까?

Question

AJAX Control Toolkit의 AutoCompleteExtender를 사용하여 사용자가 제안 된 값이 아닌 값을 입력하는 것을 어떻게 막을 수 있습니까?

Answer 1

먼저 새로운 AjaxToolKit ComboBox를 사용할지 확인하십시오.

(예 : .NET Framework 2.0을 사용하는 경우) 사용자가 요구 사항에 맞게 자동 완성을 조작 할 수는 있지만 실제로 제어가 수행 된 것이 아니라 두통입니다.

수표는 자바 스크립트 내에서 만들어지기 때문에 OnItemSelected를 잡으려고 이벤트를 추가합니다. 그리고 함수 작성 : 이

  기능 OnItemSelected (보낸 사람, 전자)
  {
  - 여기 검증은
 }

또 다른 옵션으로 목록에서 값을 선택하는 사용자가 필요로하는 것입니다 이벤트 조작 : onchange, onclick & onblur. 그러나 올바른 조합을 찾는 데는 시간이 걸립니다.

당신의 영혼을 들어 올리는 것은 가능합니다 (저작권 문제로 인해 코드를 첨부 할 수는 없습니다). 이 같은

Answer 2

뭔가가

에게 자바 스크립트

<script type="text/javascript"> 
     var isItemSelected = false; 

     //Handler for AutoCompleter OnClientItemSelected event 
     function onItemSelected() { 
      isItemSelected = true; 
     } 

     //Handler for textbox blur event 
     function checkItemSelected(txtInput) { 
      if (!isItemSelected) { 
       alert("Only choose items from the list"); 
       txtInput.focus(); 
      } 
     } 
</script> 

ASPX

<asp:Button onblur="checkItemSelected(this)" ../> 
<ajax:AutoCompleteExtender OnClientItemSelected="onItemSelected" ../> 

Answer 3

사용자가 처음에서 항목을 선택하면 작동하지 않을 것입니다 부울 isItemSelected를 사용하여 이전에 제출 된 대답을 할 수 있습니다 목록을 읽은 다음 돌아가서 대신 값을 입력하기로 결정합니다.

또한 입력 집중할 때 거짓 isItemSelected 리셋 이벤트가 있어야이를 방지하기 위해 :

ASPX

<asp:TextBox onblur="checkItemSelected(this)" onfocus="resetItemSelected()"../> 

JS

function resetItemSelected() { 
    isItemSelected = false; 
} 

을

---

또는

select에서 트리거되는 JS 이벤트를 사용하고 텍스트 상자의 값을 숨김 필드에 복사하십시오. 그런 다음 숨겨진 필드의 값을 처리에 사용하십시오.

ASPX

<asp:HiddenField runat="server" ID="hf1"/> 
<asp:TextBox runat="server" ID="tb1"></asp:TextBox> 
<ajax:AutoCompleteExtender ID="ace1" runat="server" TargetControlID="tb1" OnClientItemSelected="userSelected" .../> 

JS

function userSelected(sender, e) { 
    var selectedItem = e.get_value(); 
    $get("<%= hf1.ClientID%>").value = selectedItem; 
    return false; 
} 

그러나 잠깐 ... 더있다!

위의 내용을 향상 시키려면 텍스트 상자 값이 숨겨진 필드의 값과 일치하는지 여부를 확인하는 흐림 이벤트를 텍스트 상자에 추가하고 값이 일치하지 않으면 텍스트 상자를 지 웁니다.

//remove value if not selected from drop down list 
$('#<%=tb1.ClientID%>').blur(function() { 
    if ($('#<%=hf1.ClientID%>').val() !== $(this).val()) { 
     $(this).val(""); 
     //optionally add a message near the input 
    } 
}); 

이렇게하면 입력이 받아 들여지지 않음을 사용자에게 분명하게 알릴 수 있습니다.