Html тэг datalist не работает в Android WebView: есть ли решение без js?

Question

Есть Android WebView-приложение открывающее web-приложение (SPA на Vue.js). В web-приложении используется HTML5 тэг datalist, который в WebView не работает.

Интересны 2 решения (оба без явного использования js):

Сделать что-то на стороне Android-приложения, чтобы datalist заработал (настройки WebView и т.д.).
На стороне web-приложения: заменить datalist. Но при этом используя или только средства HTML/CSS или, как вариант, Vue-тэги.

Answer 1

Проблема с WebView известна уже больше года, но пока её так и не пофиксили.
Из вариантов на чистом HTML/CSS – совсем уже примитивный select, но вероятно вы про него знаете. Какие-то специфичных тегов для Vue нет – только самописные решения:

var app = new Vue({
  el: '#app',
  data: {
    word: '',
    projects: {"DataCenterMetro":"TEST1","IFF_Handway":"国际香料","SPH_Handway":"上药控股广东有限公司空调系统","QingTang_GZ":"广州地铁_清塘站","BTE_Handway":"白天鹅宾馆","NSSC_SZ":"深圳地铁_南山书城站","TA0301_Handway":"天安云谷二期"}
  },
  computed: {
    filtered_projects: function () {
      var vm = this, result = {};
      if (vm.word) {
        for(var key in vm.projects) {
          if(key.toLowerCase().indexOf(vm.word) != -1 || vm.projects[key].toLowerCase().indexOf(vm.word) != -1)
            result[key] = vm.projects[key];
        }
      }
      return result;
    }
  },
  created: function () {
    var vm = this;
    // get project
  },
  methods: {
    gotoProjectPage: function (key) {
      console.log('/map_login?project=' + key);
    }
  },
  });

#list {
  font-size: 12px;
  list-style: none;
  margin: 0;
  padding: 5px 0;
  background-color: white;
  border-radius: 0 0 5px 5px;
  border: 1px #ccc solid;
  
}

#list li {
  display: block;
  padding: 5px 15px;
}

#list li:hover {
  background-color: #ccc;
/*   color: white; */
}

#list li span {
  font-weight: 550;
}

#list li p {
  margin: 5px 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <input type="text" v-model="word" placeholder="Search"/>
    <ul id="list" v-if="Object.keys(filtered_projects).length &gt; 0">
      <li v-for="(value, key) in filtered_projects" @click="gotoProjectPage(key)"><span>{{ value }}</span>
        <p>{{ key }}</p>
      </li>
    </ul><span></span>
  </div>
</div>

БЛОГ НА HUSL

Html тэг datalist не работает в Android WebView: есть ли решение без js?

Ответы (1 шт):