jQuery UI 자동 완성:제안된 리스트에서 선택한 값만 허용

jQuery UI 자동 완성:제안된 리스트에서 선택한 값만 허용

jQuery UI Autocomplete를 구현하고 있는데 텍스트 상자에 값을 입력할 수 있는 방법이 아니라 반환되는 권장 결과 중 선택만 허용하는 방법이 있는지 궁금합니다.

이 사이트에서 사용하는 것과 같은 태그 부착 시스템에 사용하고 있기 때문에 사용자가 자동 완성 플러그인으로 반환되는 미리 입력된 목록에서 태그를 선택할 수 있도록 하고 싶습니다.

다음 항목도 사용할 수 있습니다.

change: function(event,ui){
  $(this).val((ui.item ? ui.item.id : ""));
}

단점은 사용자가 허용 가능한 항목의 전체 값을 입력하더라도 텍스트 필드에서 포커스를 이동하면 값이 삭제되고 다시 수행해야 한다는 것입니다.값을 입력할 수 있는 유일한 방법은 목록에서 값을 선택하는 것입니다.

그게 너한테 중요한지 아닌지 모르겠어.

선택한 항목이 정의되지 않아 동일한 문제가 발생했습니다.회피책을 입수하여toLowerCase기능을 합니다.

$('#' + specificInput).autocomplete({ 
  create: function () {
    $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
      $(ul).addClass('for_' + specificInput); //usefull for multiple autocomplete fields
      return $('<li data-id = "' + item.id + '">' + item.value + '</li>').appendTo(ul); 
    };
  }, 
  change:
    function( event, ui ){
      var selfInput = $(this); //stores the input field
      if ( !ui.item ) { 
        var writtenItem = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val().toLowerCase()) + "$", "i"), valid = false;

        $('ul.for_' + specificInput).children("li").each(function() {
          if($(this).text().toLowerCase().match(writtenItem)) {
            this.selected = valid = true;
            selfInput.val($(this).text()); // shows the item's name from the autocomplete
            selfInput.next('span').text('(Existing)');
            selfInput.data('id', $(this).data('id'));
            return false;
          }
        });

        if (!valid) { 
          selfInput.next('span').text('(New)');
          selfInput.data('id', -1); 
        }
    }
}

http://jsfiddle.net/pxfunc/j3AN7/

var validOptions = ["Bold", "Normal", "Default", "100", "200"]
previousValue = "";

$('#ac').autocomplete({
    autoFocus: true,
    source: validOptions
}).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
});

합의서 목록을 작성하면 다음과 같습니다.

 $("#settlement").autocomplete({
  source:settlements,
  change: function( event, ui ) {
  val = $(this).val();
  exists = $.inArray(val,settlements);
  if (exists<0) {
    $(this).val("");
    return false;
  }
 }
});

내 경우 코드를 수정하기만 하면 작동한다.

selectFirst: true,
change: function (event, ui) {
        if (ui.item == null){ 
         //here is null if entered value is not match in suggestion list
            $(this).val((ui.item ? ui.item.id : ""));
        }
    }

해 볼 수 있습니다

Ajax 제출 및 처리

이것은 여러분 중 몇 명에게 도움이 될 것입니다.

$('#INPUT_ID').autocomplete({
    source: function (request, response) {
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: autocompleteURL,
            data: "{'data':'" + $('INPUT_ID').val() + "'}",
            dataType: 'json',
            success: function (data) {
                response(data.d);
            },
            error: function (data) {
                console.log('No match.')
            }
        });
    },
    change: function (event, ui) {
        var opt = $(this).val();

        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: autocompleteURL,
            data: "{'empName':'" + name + "'}",
            dataType: 'json',
            success: function (data) {
                if (data.d.length == 0) {
                    $('#INPUT_ID').val('');
                    alert('Option must be selected from the list.');
                } else if (data.d[0] != opt) {
                    $('#INPUT_ID').val('');
                    alert('Option must be selected from the list.');
                }
            },
            error: function (data) {
                $(this).val('');
                console.log('Error retrieving options.');
            }
        });
    }
});

저는 drupal 7.38을 사용하고 있으며, 자동완성으로 선택박스에서만 입력을 허용하려면 js가 더 이상 필요하지 않은 지점에서 사용자 입력을 삭제하기만 하면 됩니다.이 경우 검색 결과가 제안 팝업에 도착하자마자 다음과 같이 설정할 수 있습니다.

 **this.input.value = ''**

autocomplete.displicate에서 추출한 아래를 참조하십시오.그래서 Drupal.jsAC.프로토타입 전체를 복사했어요커스텀 모듈에서 오브젝트를 찾아 원하는 폼에 추가합니다.

 $form['#attached']['js'][] = array(
  'type' => 'file',
  'data' => 'sites/all/modules/<modulname>_autocomplete.js',
 );

그리고 여기 드루팔의 원래 misc/autocomplete.js에서 발췌한 것이 한 줄에 의해 수정된 것입니다.

Drupal.jsAC.prototype.found = function (matches) {
  // If no value in the textfield, do not show the popup.
  if (!this.input.value.length) {
    return false;
  }
  // === just added one single line below ===
  this.input.value = '';

  // Prepare matches.

=컷...

사용자가 자동 완성 목록에서 권장 사항을 선택하도록 제한하려면 다음과 같이 닫기 함수를 정의해 보십시오.결과 드롭다운이 닫히면 닫기 함수가 호출되고 목록에서 사용자가 선택한 경우 event.currentTarget이 정의되며, 정의되지 않은 경우 사용자가 옵션을 선택하지 않고 결과가 닫힙니다.옵션을 선택하지 않으면 입력을 공백으로 리셋합니다.

//
// Extend Autocomplete
//
$.widget( "ui.autocomplete", $.ui.autocomplete, {      
   options: {
      close: function( event, ui ) {
         if (typeof event.currentTarget == 'undefined') {
            $(this).val("");
         }
      }
   }
 });

하실 수 .response이벤트와 변경 이벤트를 결합하여 다음과 같은 권장 항목을 저장합니다.

response: function (event, ui) {
    var list = ui.content.map(o => o.value.toLowerCase());
},
change: function (event, ui) {
    if (!ui.item && list.indexOf($(this).val().toLowerCase()) === -1 ) { $(this).val(''); 
}

언급URL : https://stackoverflow.com/questions/4952094/jquery-ui-autocomplete-only-allow-selected-valued-from-suggested-list