我創建了一個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

相關問題