Забавный тег H5 с жареной курицей — <dataList>

JavaScript HTML
Забавный тег H5 с жареной курицей — <dataList>
  • Автор: Чен Даютоу
  • гитхаб:KRISACHAN

предисловие

согласно сwhatwgКак показано в документе, по состоянию на крайний срок для этой статьи существует в общей сложности113HTML-теги.

Поскольку существует так много ярлыков, нам трудно использовать их все или осознавать, что они нам нужны.

Но на самом деле есть много интересных тегов, которые мы еще не открыли, о которых я расскажу в этой статье.<dataList>это один.

текст

<dataList>что это такое?

<dataList>Назовите похожее на<select>Этикетки могут проходить через пакеты<option>для представления необязательного значения элемента управления, единственное отличие состоит в том, что<dataList>нужно сотрудничать<input />использовать, и<dataList>Не представляет никакого контента, только для отображения.

Возьмем каштан:

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/15/172b5f1475ce3180~tplv-t2oaga2asx-image.image

Ну просто васаби.

Вот его совместимость:

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/15/172b5f1476e50218~tplv-t2oaga2asx-image.image

(данные изCan I use dataList)

Советы по поиску

В нашей повседневной разработке, если мы хотим реализовать подсказку для окна поиска, нам фактически нужно написать кучу прослушивателей событий и привязок данных, но если мы используем<dataList>, не надо так заморачиваться, давайте еще каштан:

Благодаря своим характеристикам мы можем сэкономить много ненужного логического кода, что очень удобно.

подзаголовок

Мы можем не только задать его поисковое значение, но и<option>изlabelатрибут, чтобы установить его подзаголовок, и еще один каштан:

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/15/172b5f147664abd7~tplv-t2oaga2asx-image.image

Так что дисплей на самом деле очень гуманизирован.

Сотрудничайте с JS.

попробуем использовать<dataList>Для сотрудничества с JSONP написать пример междоменного запроса Baidu search API:

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/15/172b5f1476d1041f~tplv-t2oaga2asx-image.image

код показывает, как показано ниже:

词条搜索：<input id="input" type="text" name="words" list="words">
<datalist id="words" style="width: 100px">
    <option label="" value=""></option>
</datalist>
<script>
    'use strict'
    const searchCallback = data => {
        words.innerHTML = ''
        const {
            s
        } = data
        console.log(s)
        const fragment = document.createDocumentFragment()
        s.forEach((res, idx) => {
            const option = document.createElement('option')
            option.label = idx
            option.value = res
            fragment.appendChild(option)
        })
        words.appendChild(fragment)
    }
    input.addEventListener('keyup', ev => {
        const createdScript = document.createElement('script')
        createdScript.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${input.value}&cb=searchCallback`
        document.body.appendChild(createdScript)
        document.body.removeChild(createdScript)
    })
</script>

Хотя это не сильно отличается от обычной практики, использование<dataList>Мы можем уменьшить стиль и место написания окна поиска, а также это больше соответствует семантическим характеристикам, и метод привязки также очень удобен.

Если поиск выполняется в заданном источнике данных (типа запроса состояния кеша данных), то можно еще и сократить написание кода соответствующего фильтра, не очень удобно и быстро?

На самом деле, в HTML есть еще много интересного. Если вам интересно, вы можете копнуть еще немного. Какие еще интересные теги или атрибуты вы можете использовать.

использованная литература

  1. whatwg datalist
  2. whatwg input
  3. MDN datalist

постскриптум

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95

Категории