source

jQuery UI 자동 완성을 선택한 후 양식 필드 지우기

factcode 2023. 9. 1. 21:23
반응형

jQuery UI 자동 완성을 선택한 후 양식 필드 지우기

양식을 개발하고 있으며, jQuery UI 자동 완성을 사용하고 있습니다.사용자가 옵션을 선택할 때 선택 항목이 상위 항목에 추가된 범위로 팝업되도록 합니다.<p>태그. 그러면 필드가 선택 항목으로 채워지지 않고 지워지기를 원합니다.

스판은 멀쩡해 보이는데, 필드를 정리할 수가 없습니다.

jQuery UI 자동 완성의 기본 선택 작업을 취소하려면 어떻게 해야 합니까?

내 코드는 다음과 같습니다.

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

간단하게 하기$(this).val("");작동하지 않습니다.화가 나는 것은 자동 완성을 무시하고 사용자가 다음과 같이 콤마를 입력할 때만 조치를 취하면 거의 정확한 기능이 작동한다는 것입니다.

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

실제 최종 결과는 여러 개의 선택 항목을 자동으로 완료하는 것입니다.만약 누군가 그것에 대한 제안이 있다면, 그들은 환영할 것입니다.

더하다$(this).val(''); return false;끝까지select필드 클리어 및 이벤트 취소 기능 :)

이렇게 하면 값이 업데이트되지 않습니다.109호선 주변에서 어떻게 작동하는지 보실 수 있습니다.

여기에 있는 코드는 특히 다음과 같이 false를 확인합니다.

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

false를 반환하는 대신 event.preventDefault()를 사용할 수도 있습니다.

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}

필드를 비우려면 선택 콜백 내에서 return false가 필요합니다. 그러나 필드를 다시 제어하려면, 즉 값을 설정하려면 새로운 함수를 호출하여 UI를 해제해야 합니다.

다음과 같은 프롬프트 값이 있을 수 있습니다.

var promptText = "Enter a grocery item here."

요소의 밸브로 설정합니다.(""에 설정한 포커스).

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}

저한테는 잘 맞습니다.

이벤트를 선택한 후 이벤트 변경을 사용했습니다.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

저는 초보자입니다!

사용해 보십시오.

select: function (event, ui) {
    $(this).val('');
    return false;       
}

저는 집중력을 잃도록 강요하면서 그것을 해결했습니다.

$('#select_id').blur();
printResult();

언급URL : https://stackoverflow.com/questions/2561903/clear-form-field-after-select-for-jquery-ui-autocomplete

반응형