[html] 항목 입력 옵션이있는 HTML 콤보 상자

Question 1

이미 목록에있는 값을 선택하는 것 외에 콤보 상자에 입력 할 수 있다는 인상을 받았습니다. 그러나이 작업을 수행하는 방법에 대한 정보를 찾을 수없는 것 같습니다. 텍스트를 입력 할 수 있도록 추가해야하는 속성이 있습니까?

Question 2

이전에 datalist(아래 참고 참조) input사람들이 자신의 옵션을 입력 할 수 있도록 추가 요소를 제공했습니다.

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

스 니펫 확장

이 메커니즘 은 모든 브라우저에서 작동하며 JavaScript가 필요하지 않습니다 .

약간의 JavaScript를 사용 input하여 “기타”옵션이 선택된 경우 에만 표시 할 수 있습니다 .

datalist 요소

이 datalist요소는이 개념에 더 나은 메커니즘을 제공하기위한 것입니다. 일부 브라우저 (예 : iOS Safari <12.2)에서는 지원되지 않거나 구현에 문제가 있습니다. Can I Use 페이지를 확인하여 현재 데이터 목록 지원을 확인하십시오 .

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">
  <option value="B">
</datalist>

스 니펫 확장

Question 3

HTML에서는이를 거꾸로 수행합니다. 텍스트 입력을 정의합니다.

<input type="text" list="browsers" />

데이터 목록을 첨부합니다. (입력의 목록 속성에 유의하십시오).

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Question 4

이 링크는 당신을 도울 수 있습니다 :
http://www.scriptol.com/html5/combobox.php

두 가지 예가 있습니다. 하나는 html4에서 다른 하나는 html5에서

HTML5

<input type="text" list="browsers"/>
 <datalist id="browsers">
    <option>Google</option>
    <option>IE9</option>
 </datalist>

HTML4

 <input type="text" id="theinput" name="theinput" />
 <select name="thelist" onChange="combo(this, 'theinput')">
   <option>one</option>
   <option>two</option>
   <option>three</option>
 </select>

 function combo(thelist, theinput) {
     theinput = document.getElementById(theinput);
     var idx = thelist.selectedIndex;
     var content = thelist.options[idx].innerHTML;
     theinput.value = content;
 }

Question 5

그만큼 dojo여기 예는 대부분의 경우 기존 코드에 적용될 때 작동하지 않습니다. 따라서 여기에서 찾을 수있는 대안을 찾아야했습니다-hxxp : //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (지금은 스팸 사이트를 가리 킵니다. )

archive.org (별로 유용하지 않음)

여기에 jsfiddle입니다 – https://jsfiddle.net/ze7fgby7/

Question 6

음, 2016 년이고 콤보를 할 수있는 쉬운 방법이 아직 없습니다 … 확실히 데이터 목록이 있지만 safari / ios 지원 없이는 실제로 사용할 수 없습니다. 적어도 우리는 ES6 ..을 가지고 있습니다. 아래는 div 또는 span을 래핑하는 콤보 클래스에 대한 시도입니다. 입력 상자를 선택 위에 놓고 관련 이벤트를 바인딩하여 콤보로 전환합니다.

https://github.com/kofifus/Combo 에서 코드를 참조하십시오.

(코드는 https://github.com/kofifus/New 의 클래스 패턴에 의존합니다. )

콤보를 만드는 것은 쉽습니다! 생성자에 div를 전달하십시오.

let mycombo=Combo.New(document.getElementById('myCombo'));
mycombo.options(['first', 'second', 'third']);

mycombo.onchange=function(e, combo) {
  let val=combo.value;
  // let val=this.value; // same as above
  alert(val);
 }

<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>

<div id="myCombo" style="width:100px;height:20px;"></div>

스 니펫 확장

Question 7

이것은 훨씬 작고 jquery가 필요하지 않으며 safari에서 더 잘 작동합니다.
https://github.com/Fyrd/purejs-datalist-polyfill/

수정에 대한 문제를 확인하여 아래쪽 화살표를 추가하십시오.
https://github.com/Fyrd/purejs-datalist-polyfill/issues

Question 8

내 솔루션은 매우 간단하고 기본 편집 가능한 콤보 상자와 똑같이 보이지만 IE6에서도 작동합니다 (여기에있는 일부 답변에는 많은 코드 또는 외부 라이브러리가 필요하며 그 결과는 그렇습니다. 예를 들어 텍스트 상자의 텍스트는 콤보 박스의 일부이거나 편집 가능한 콤보 박스처럼 보이지 않습니다).

요점은 텍스트 상자 위에 표시되는 드롭 다운 아이콘 만 콤보 상자를 잘라내는 것입니다. 그리고 텍스트 상자는 콤보 상자 부분 아래에 약간 넓기 때문에 오른쪽 끝이 보이지 않습니다. 시각적으로 콤보 상자로 계속됩니다 : https://jsfiddle.net/dLsx0c5y/2/

select#programmoduleselect
{
    clip: rect(auto auto auto 331px);
    width: 351px;
    height: 23px;
    z-index: 101;
    position: absolute;
}

input#programmodule
{
    width: 328px;
    height: 17px;
}

<table><tr>
<th>Programm / Modul:</th>
<td>
    <select id="programmoduleselect"
        onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
        onclick="this.selectedIndex = -1;">
        <option value=RFEM>RFEM</option>
        <option value=RSTAB>RSTAB</option>
        <option value=STAHL>STAHL</option>
        <option value=BETON>BETON</option>
        <option value=BGDK>BGDK</option>
    </select>
    <input name="programmodule" id="programmodule" value="" autocomplete="off"
        onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>

(원래 예를 들어 여기에 사용되었지만 다음 양식을 보내지 마십시오 : old.dlubal.com/WishedFeatures.aspx)

편집 : 스타일은 macOS에서 약간 다를 필요가 있습니다 .Ch는 괜찮습니다 .FF의 경우 콤보 상자의 높이를 높이고 Safari와 Opera는 콤보 상자의 높이를 무시하므로 글꼴 크기를 늘리십시오 (상한이 있으므로 텍스트 상자를 줄이십시오. 높이 약간) : https://i.stack.imgur.com/efQ9i.png