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

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

---

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

---

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

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

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

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

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

datalist 요소

이 datalist요소는이 개념에 더 나은 메커니즘을 제공하기위한 것입니다. 중요한 것은 Safari, iOS Safari 또는 Opera Mini에서 지원되지 않는다는 것입니다. Internet Explorer 구현에도 몇 가지 문제가 있습니다. 이 정보는 최신 정보가 아니므 로 더 최신 정보에 대한 현재 데이터 목록 지원을 보려면 사용할 수 있음을 확인하십시오 . (iOS Safari ≥ 12.2에서 지원됨)

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

---

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>

---

이 링크는 당신을 도울 수 있습니다 : 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;
 }

---

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

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

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

---

음, 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>

---

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

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

---

내 솔루션은 매우 간단하고 기본 편집 가능한 콤보 상자와 똑같이 보이지만 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

---

HTML 데이터 목록 태그가 아직 완전히 지원되지 않는다는 점을 감안할 때 제가 사용한 대체 접근 방식은 Dojo Toolkit ComboBox 입니다. 내가 살펴본 다른 옵션보다 구현하기 쉽고 더 잘 문서화되었습니다. 또한 기존 프레임 워크와도 잘 어울립니다. 제 경우에는 Codeigniter와 Bootstrap을 기반으로하는 기존 웹 사이트에 문제없이이 콤보 박스를 추가했습니다. 본문 태그 대신 콤보의 부모 요소에 Dojo 테마 (예 : class = "claro")를 적용해야합니다. 스타일 충돌을 방지합니다.

먼저 Dojo 테마 중 하나에 대한 CSS를 포함합니다 (예 : 'Claro'). CSS 파일이 아래의 JS 파일보다 먼저 포함되는 것이 중요합니다.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

다음으로 CDN을 통해 jQuery 및 Dojo Toolkit 포함

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

Next, you can just follow Dojo's sample code or use the sample below to get a working combobox.

<body>
    <!-- Dojo Dijit ComboBox with 'Claro' theme -->
    <div class="claro"><input id="item_name_1" class=""/></div>

    <script type="text/javascript">
        $(document).ready(function () {
            //In this example, dataStore is simply an array of JSON-encoded id/name pairs
            dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];

            require(
                [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], 
                function (Memory, ComboBox) {
                    var stateStore = new Memory({
                        data: dataStore
                    });

                    var combo = new ComboBox({
                        id: "item_name_1",
                        name: "desc_1",
                        store: stateStore,
                        searchAttr: "name"},                        
                        "item_name_1"
                        ).startup();

                });

        });

    </script>
</body>

---

None of the other answers were satisfying, largely because the UI still looks bad. I found this, which looks good and is very close to being perfect as well as customizable.

A full list of examples and options and such can be found here, but here's a basic demo:

$('#editable-select').editableSelect();

<link href="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.js"></script>

<select id="editable-select">
	<option>Alfa Romeo</option>
	<option>Audi</option>
	<option>BMW</option>
	<option>Citroen</option>
</select>

---

Look at ComboBox or Combo on this site: http://www.jeasyui.com/documentation/index.php#

---

    <html>
<head>
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('#selectnumber').change(function(){
                alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
            })
        });
    </script>
</head>
<body>
       <div>
        <select id="selectnumber">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select>

    </div>
   </body>
</html>

Thanks...:)

참고URL : https://stackoverflow.com/questions/14614702/html-combo-box-with-option-to-type-an-entry