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

Program / 글쓴이

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

스팬이 괜찮아 보이지만 필드를 지울 수 없습니다.

jQuery UI Autocomplete의 기본 선택 작업을 어떻게 취소합니까?

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

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();
}

답변

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

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

var promptText = "Enter a grocery item here."

요소의 val로 설정하십시오. (초점에서 ”로 설정).

$("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();

답변