我创建了一个InputFilter。这是我的代码。如何在输入标签中选择列表项目

MyFilter = function(args) { 
    var dataUrl = args.url; 
    var divID = args.divID; 
    var div = document.getElementById(divID); 
    //var input = '<input type="text" id="myInput" onclick="myFunction()" title="Type in a name">'; 
    var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">' + 
     '<ul id="myUL">' + '<li>' + '<a href="#"></a>' + '</li>' + '</ul>'; 
    div.innerHTML = myTable; 

    function foo(callback) { 
     var httpRequest = new XMLHttpRequest(); 
     httpRequest.open('GET', "data.json", true); 
     httpRequest.onreadystatechange = function() { 
      if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) { 
       callback(httpRequest.responseText); 
      } 
     }; 
     httpRequest.send(); 
    } 

    foo(function(data) { 
     debugger; 
     var jsonc = JSON.parse(data); 
     var new_opt = ""; 
     for (i = 0; i < jsonc.length; i++) { 
      new_opt += '<li><a href="#">' + jsonc[i]['VALUE'] + '</a></li>'; 
     } 
     document.getElementById('myUL').innerHTML = new_opt; 

    }); 

    myFunction = function() { 
     debugger; 
     var input, filter, ul, li, a, i; 
     input = document.getElementById("myInput"); 
     filter = input.value.toUpperCase(); 
     ul = document.getElementById("myUL"); 
     li = ul.getElementsByTagName("li"); 
     for (i = 0; i < li.length; i++) { 
      a = li[i].getElementsByTagName("a")[0]; 
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       li[i].style.display = ""; 
      } else { 
       li[i].style.display = "none"; 

      } 
     } 
    } 
}

我想要当我点击列表项目，这些项目geteselected并显示到输入字段，像组合框。

任何人都可以请帮助我如何做到这一点。

这是我的小提琴手。 JS FIDDLE

注意：目前我的代码能够搜索，我想选择并显示在输入中。

这是发生在其他项目，但我在这里使用表。

代码是

document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr) { 
      _tr.addEventListener('click', function() { 
       document.getElementById('myInput').value += " ; " + this.getElementsByTagName('td')[0].textContent; 
      }); 
     });

我想点击a标签的项目，所选项目要通过;分离，输入标签显示。

来源

2017-06-20 David

定义'Inputfield' ... – vsync

@vsync我的意思是它是输入标签，我可以给一些输入。 – David

标题很不清楚。你如果发布了一个关于你想在UX上发生的事情的例子，它会帮助我改变@ – vsync

Playground

function filterList(value, list) { 
 
    var li, i, match; 
 
    
 
    for (i = list.children.length; i--;) { 
 
     li = list.children[i]; 
 
     match = li.textContent.toLowerCase().indexOf(value.toLowerCase()) > -1; 
 
     li.classList.toggle('hidden', !match) 
 
    } 
 
} 
 

 
function selectItem(input, value){ 
 
\t input.value = value; 
 
} 
 

 

 
var input = document.querySelector('input'), 
 
\t list = document.querySelector("#myUL"); 
 

 
input.addEventListener('input', function(e){ 
 
\t filterList(e.target.value, list); 
 
}) 
 
list.addEventListener('click', function(e){ 
 
\t if(e.target.tagName == 'A' && !e.target.classList.contains('header')) 
 
\t \t selectItem(input, e.target.textContent) 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 

 
input { 
 
    background-image: url('/css/searchicon.png'); 
 
    background-position: 10px 12px; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    font-size: 16px; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #ddd; 
 
    margin-bottom: 12px; 
 
} 
 

 
#myUL { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#myUL li a { 
 
    border: 1px solid #ddd; 
 
    margin-top: -1px; /* Prevent double borders */ 
 
    background-color: #f6f6f6; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: black; 
 
    display: block 
 
} 
 

 
#myUL li.hidden{ display:none; } 
 

 
#myUL li a.header { 
 
    background-color: #e2e2e2; 
 
    cursor: default; 
 
} 
 

 
#myUL li a:hover:not(.header) { 
 
    background-color: #eee; 
 
}

<h2>My Phonebook</h2> 
 

 
<input placeholder="Search for names.." title="Type in a name"> 
 

 
<ul id="myUL"> 
 
    <li><a href="#" class="header">A</a></li> 
 
    <li><a href="#">Adele</a></li> 
 
    <li><a href="#">Agnes</a></li> 
 

 
    <li><a href="#" class="header">B</a></li> 
 
    <li><a href="#">Billy</a></li> 
 
    <li><a href="#">Bob</a></li> 
 

 
    <li><a href="#" class="header">C</a></li> 
 
    <li><a href="#">Calvin</a></li> 
 
    <li><a href="#">Christina</a></li> 
 
    <li><a href="#">Cindy</a></li> 
 
</ul>

填写3210

来源

2017-06-20 12:26:33 vsync

Thanks它的工作原理，对于我创建的多重选择我使用'input.value + = value;'那么一个简单的问题是可以显示并点击输入标签隐藏li。 – David

对不起，我不明白这个问题..点击输入的地方？它会显示或隐藏什么？你不解释 – vsync

现在列表显示在输入标签的正下方。我只想在点击输入标签时显示。 – David

试试这个

使用jQuery你可以设置选择名字textfield

function myFunction() { 
 
    var input, filter, ul, li, a, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById("myUL"); 
 
    li = ul.getElementsByTagName("li"); 
 
    for (i = 0; i < li.length; i++) { 
 
    a = li[i].getElementsByTagName("a")[0]; 
 
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     li[i].style.display = ""; 
 
    } else { 
 
     li[i].style.display = "none"; 
 

 
    } 
 
    } 
 
} 
 
$('a').click(function() { 
 
    var val = $(this).text(); 
 
    $('#myInput').val(val); 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#myInput { 
 
    background-image: url('/css/searchicon.png'); 
 
    background-position: 10px 12px; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    font-size: 16px; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #ddd; 
 
    margin-bottom: 12px; 
 
} 
 

 
#myUL { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#myUL li a { 
 
    border: 1px solid #ddd; 
 
    margin-top: -1px; 
 
    /* Prevent double borders */ 
 
    background-color: #f6f6f6; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: black; 
 
    display: block 
 
} 
 

 
#myUL li a.header { 
 
    background-color: #e2e2e2; 
 
    cursor: default; 
 
} 
 

 
#myUL li a:hover:not(.header) { 
 
    background-color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>My Phonebook</h2> 
 

 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
 

 
<ul id="myUL"> 
 
    <li><a href="#" class="header">A</a></li> 
 
    <li><a href="#">Adele</a></li> 
 
    <li><a href="#">Agnes</a></li> 
 

 
    <li><a href="#" class="header">B</a></li> 
 
    <li><a href="#">Billy</a></li> 
 
    <li><a href="#">Bob</a></li> 
 

 
    <li><a href="#" class="header">C</a></li> 
 
    <li><a href="#">Calvin</a></li> 
 
    <li><a href="#">Christina</a></li> 
 
    <li><a href="#">Cindy</a></li> 
 
</ul>

来源

2017-06-20 09:51:53 Bhargav

是否有可能不使用jquery。因为它发生在我使用表格的其他项目中。不同的CSS我正在使用。我更新了我的问题。请检查 – David

如果可能，请提供完整代码 – Bhargav

你知道如何将JSON数据提供给JS小提琴。我将创建一个工作代码的小提琴。 – David

如何在输入标签中选择列表项目

回答

Playground

相关问题