• Author: Chen Da Yu Tou
  • Making: KRISACHAN

preface

As the WHATWG documentation shows, there are 113 HTML tags as of the end of this article.

Because there are so many labels out there, it’s hard to use them all or realize that we need them.

But there are a lot of interesting tags out there that we haven’t explored, and is one of them.

The body of the

<dataList>What is?

The tag is similar to the , and does not represent any content. For demonstration purposes only.

Let’s see:

Well, mustard is simple.

Here’s how it works:

(Data from Can I use dataList)

Search tips

In our daily development, if we want to implement a search box prompt, we actually have to write a bunch of event listeners and data binding, but if we use , we don’t need that much trouble, let’s try again:

Through its own features, we can avoid a lot of unnecessary logic code, very convenient.

subtitle

We can not only set its search value, we can also set its subtitle by

So the display is actually very human.

Cooperate with JS

Let’s try with JSONP to write a cross-domain request Baidu search API example:

The code is as follows:

Search term:<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>
Copy the code

While it doesn’t look much different from the usual approach, using we can reduce the style of the search box and write the location, and it is more semantic and binding.

If the search is performed in a given data source (such as requesting the status of the data cache), then we can also reduce the code for the corresponding filter, wouldn’t it be convenient and quick?

In fact, there are a lot of interesting things in HTML, if you are interested in the reader, may wish to explore kang Kang and what interesting tags or attributes can play.

The resources

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

Afterword.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. His wechat id is krisChans95