자바스크립트를 사용하여 HTML5 데이터리스트를 새로 고치려면 어떻게 해야 합니까?

자바스크립트를 사용하여 HTML5 데이터리스트를 새로 고치려면 어떻게 해야 합니까?

HTML5에 옵션을 로드하고 있습니다.datalist동적 요소그러나 브라우저는 다음을 표시하려고 시도합니다.datalist옵션이 로드되기 전에 실행됩니다.그러면 목록이 표시되지 않거나 부분 목록이 표시되는 경우가 있습니다.옵션이 로드되면 자바스크립트를 통해 목록을 새로 고칠 수 있는 방법이 있습니까?

HTML

<input type="text" id="ingredient" list="ingredients">
<datalist id="ingredients"></datalist>

자바스크립트

$("#ingredient").on("keyup", function(event) {
    var value = $(this).val();
    $.ajax({
        url: "/api/ingredients",
        data: {search: value.length > 0 ? value + "*" : ""},
        success: function(ingredients) {
            $("#ingredients").empty();
            for (var i in ingredients) {
                $("<option/>").html(ingredients[i].name).appendTo("#ingredients");
            }
            // Trigger a refresh of the rendered datalist
        }
    });
});

참고: Chrome과 Opera에서는 사용자가 텍스트를 입력한 후 입력을 클릭하는 경우에만 전체 목록이 표시됩니다.다만 전체 목록은 사용자 유형으로 표시했으면 합니다.Firefox는 옵션이 업데이트되면 목록이 자동으로 새로워지기 때문에 문제가 되지 않습니다.

갱신하다

저는 이 질문이 만족스러운 답변인지 잘 모르겠습니다. 왜냐하면 저는 이것이 단순히 특정 브라우저의 단점이라고 생각하기 때문입니다.만약에datalist업데이트되고 브라우저가 목록을 새로 고쳐야 하지만 일부 브라우저(Chrome 및 Opera 포함)에서는 이 작업을 수행하지 않습니다.해킹?

질문 후 꽤 오랜 시간이 흘렀지만 IE와 크롬에 대한 해결책을 찾았습니다(오페라에서 테스트되지 않았고 파이어폭스에서는 이미 정상임).

솔루션은 다음과 같이 성공(또는 완료) 기능이 끝날 때 입력에 초점을 맞추는 것입니다.

$("#ingredient").on("keyup", function(event) {
var _this = $(this);
var value = _this.val();
$.ajax({
    url: "/api/ingredients",
    data: { search: value.length > 0 ? value + "*" : "" },
    success: function(ingredients) {
        $("#ingredients").empty();
        for (var i in ingredients) {
           $("<option/>").html(ingredients[i].name).appendTo("#ingredients");
        }
        // Trigger a refresh of the rendered datalist
        // Workaround using focus()
        _this.focus();
    }
});

Firefox, Chrome 및 IE 11+(10개)에서 작동합니다.

데이터 리스트를 업데이트할 때도 같은 문제가 있었습니다.

새 값은 새 입력 이벤트 전에는 표시되지 않습니다.

나는 제안된 모든 솔루션을 시도했지만 파이어폭스를 사용하지 않고 AJAX를 통해 데이터리스트를 업데이트했습니다.

그러나 문제를 해결했습니다(간단하게 설명하기 위해 예제를 사용하겠습니다).

<input type="text" id="ingredient" list="ingredients" **autocomplete="off"**>
<datalist id="ingredients"></datalist>

$("#ingredient").on("**input**", function(event) { ....}

자동완성과 입력은 나의 문제를 해결해 주는 커플이며 크롬에서도 작동합니다.

키 스트로크마다 AJAX 요청을 하지 않으면 문제를 해결할 수 있을 것입니다.스로틀 기술은 다음을 사용하여 시도할 수 있습니다.set/cleatTimeout마지막 문자를 입력한 후 500ms 후에 요청을 발행합니다.

$("#ingredient").on("keyup", function(event) {

    clearTimeout($(this).data('timeout'));

    $(this).data('timeout', setTimeout($.proxy(function() {

        var value = $(this).val();

        $.ajax({
            url: "/api/ingredients",
            data: {search: value.length > 0 ? value + "*" : ""},
            success: function(ingredients) {
                $("#ingredients").empty();
                for (var i = 0; i < ingredients.length; i++) {
                    $("<option/>").html(ingredients[i].name).appendTo("#ingredients");
                }
            }
        });

    }, this), 500));
});

요요는 정확한 해결책을 제시했지만, 여기에 삽입물을 DOM에 구조화하는 더 나은 방법이 있습니다.

$("#ingredient").on("keyup", function(event) {
var _this = $(this);
var value = _this.val();
$.ajax({
    url: "/api/ingredients",
    data: { search: value.length > 0 ? value + "*" : "" },
    success: function(ingredients) {
        var options = ingredients.map(function(ingredient) {
          var option = document.createElement('option');
          option.value = ingredient.name;
          return option;
        });
        $("#ingredients")
          .empty()
          .append(options);
        // Trigger a refresh of the rendered datalist
        // Workaround using focus()
        _this.focus();
    }
});

DOM 조작 감소

이러한 개선을 통해 성공적으로 콜백할 때마다 한 번씩만 DOM에 삽입할 수 있습니다.이렇게 하면 다시 렌더링해야 하는 브라우저가 줄어들며 보기의 "깜빡임"을 개선하는 데 도움이 됩니다.

기능적 프로그래밍과 덜 관용적인 jQuery

여기서는 Array.prototype.map을 사용하여 jQuery의 일부를 정리하고 약간 덜 관용적으로 만듭니다.ECMA Chart(ECMA 차트)를 통해 이 기능이 대상이 되는 모든 브라우저에서 작동함을 알 수 있습니다.

낫 해키

이것은 결코 어색하지 않습니다.IE는 새로운 목록 옵션을 표시하기 위해 입력을 자동으로 새로 고치지 않는 유일한 브라우저인 것으로 보입니다.포커스(focus)는 입력이 다시 포커스되도록 하는 방법일 뿐이며, 이를 통해 뷰를 새로 고칩니다.

이 솔루션은 제 회사가 내부적으로 지원해야 하는 모든 브라우저, IE10+ Chrome과 Firefox에서 매우 잘 작동합니다.

#container 안에 있는 #성분 요소를 놓고 다음 코드를 사용해 보십시오.

$.ajax({
    url: "/api/ingredients",
    data: {search: value.length > 0 ? value + "*" : ""},
    success: function(ingredients) {
        $("#ingredients").remove();
        var item = $('<datalist id="ingredients"></datalist>');
        for (var i in ingredients) {                
            item.append("<option>"+ ingredients[i].name +"</option>");
        }
        item.appendTo('#container');
    }
});

#container가 없고 jQuery replaceWith():

$.ajax({
    url: "/api/ingredients",
    data: {search: value.length > 0 ? value + "*" : ""},
    success: function(ingredients) {
        var item = $('<datalist id="ingredients"></datalist>');
        for (var i in ingredients) {                
            item.append("<option>"+ ingredients[i].name +"</option>");
        }
        $("#ingredients").replaceWith(item);
    }
});

당신의 문제는 AJAX가 비동기적이라는 것입니다.

AJAX에 대한 콜백이 필요합니다.onSuccess데이터 리스트를 업데이트할 수 있습니다.물론, 데이터리스트 옵션이 뒤떨어지는 "거르는" 행동은 성능이 좋지 않을 수도 있습니다.

너무과 같이 해야 1.첫쿼리와 1. AJAX 의 과 하고 에 합니다 을 을 되는 에 마다 와 이 합니다 을 되는 에 마다 하고 과 이 의 에 keyUp이벤트성의

입력 요소의 'list' 속성을 빈 문자열로 설정하고 곧바로 datalist 요소의 id로 다시 설정하는 방식으로 GNOME Web(WebKit)에서만 테스트된 솔루션을 찾았습니다.는가과은의에어고다력고다어d에eae음n,는etessrtdtep의력은가과input_element:

var datalist = document.getElementById(input_element.list.id);
// at this point input_element.list.id is equals to datalist.id
// ... update datalist element here
// And now the trick:
input_element.setAttribute('list','')
input_element.setAttribute('list',datalist.id)

언급URL : https://stackoverflow.com/questions/26610752/how-do-you-refresh-an-html5-datalist-using-javascript