autocomplete

時間 2019-12-06

標籤 autocomplete 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
        }
        #div1{
            margin:200px auto;
            position: relative;
        }
        ul{
            list-style: none;
            margin: 0 auto;
            background-color: #ededed;
            color: #3b200c;
            width: 400px;
            border: none;
        }
        li{
            cursor: pointer;
        }
        input{
            display: block;
            margin: 0 auto;
            line-height: 40px;
            height: 40px;
            width: 400px;
            font-size: 20px;
            background-color: #ede387;
            border: none;
        }
</style>
</head>
<body>
    <div id="div1">
        <input type="text" id="input" placeholder="有autocomplete的輸入框" />
        <ul id="ul"></ul>
    </div>
</body>
<script>
    var arr = ['a', 'apple', 'abandon', 'bilibili', 'beep', 'before', 'become', 'being', 'highmaintains', 'by', 'bye', 'banana']
    input.addEventListener('input', function (event) {
        var _value = event.target.value.trim()
        if (_value) {
            autoComplete(_value, arr)
        }
        else {
            ul.innerHTML = ''
        }
    })
    function autoComplete(str, arr) {
        var lis = []
        arr.forEach((word) => {
            if (word.startsWith(str)) {
                lis.push('<li>' + word + '</li>')
            }
        })
        ul.innerHTML = lis.join('')
    }
    function addToInput(li) {
        var _txt = li.innerText
        input.value = _txt
    }
    ul.addEventListener('click', function (event) {
        if (event.target.tagName.toLowerCase() === 'li') {
            addToInput(event.target)
        }
    })
</script>
</html>複製代碼

1. autocomplete
2. Autocomplete
3. jQuery Autocomplete
4. jQuery autocomplete
5. C# autocomplete
6. Autocomplete TEdit
7. Kendo AUTOCOMPLETE
8. jquery autocomplete
9. jquery-autocomplete
10. jQuery autocomplete 應用
更多相關文章...
• ASP.NET TextBox AutoCompleteType 屬性 - ASP.NET 教程
• ASP.NET TextBox 控件 - ASP.NET 教程

相關標籤/搜索

autocomplete

jfinal+autocomplete

mvc+jquery+autocomplete

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。