Tôi có ấn tượng rằng bạn có thể nhập vào một hộp tổ hợp bên cạnh việc chọn bất kỳ giá trị nào đã có trong danh sách. Tuy nhiên, tôi dường như không thể tìm thấy thông tin về cách thực hiện việc này. Có thuộc tính nào tôi cần thêm vào nó để cho phép nhập văn bản không?

Trước datalist(xem ghi chú bên dưới), bạn sẽ cung cấp một inputphần tử bổ sung để mọi người nhập vào tùy chọn của riêng họ.

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

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

Cơ chế này hoạt động trên tất cả các trình duyệt và không yêu cầu JavaScript .

Bạn có thể sử dụng một chút JavaScript để khéo léo chỉ hiển thị inputnếu tùy chọn "Khác" được chọn.

phần tử datalist

Phần datalisttử này nhằm cung cấp một cơ chế tốt hơn cho khái niệm này. Trong một số trình duyệt, chẳng hạn như iOS Safari <12.2, điều này không được hỗ trợ hoặc việc triển khai có vấn đề. Kiểm tra trang Tôi có thể sử dụng để xem hỗ trợ danh sách dữ liệu hiện tại .

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

trong HTML, bạn làm điều này ngược lại: Bạn xác định một đầu vào văn bản:

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

và đính kèm một danh sách dữ liệu vào nó. (lưu ý thuộc tính danh sách của đầu vào).

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

Liên kết này có thể giúp bạn: http://www.scriptol.com/html5/combobox.php

Bạn có hai ví dụ. Một trong html4 và một trong 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;
 }

Các dojoví dụ ở đây không hoạt động khi áp dụng cho mã hiện có trong hầu hết các trường hợp. Vì vậy, tôi phải tìm một trang thay thế, được tìm thấy tại đây - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (hiện trỏ đến một trang web spam hoặc tệ hơn )

archive.org (không hữu ích lắm)

Đây là jsfiddle - https://jsfiddle.net/ze7fgby7/

Vâng, đó là năm 2016 và vẫn không có cách nào dễ dàng để thực hiện một kết hợp ... chắc chắn rằng chúng ta có datalist nhưng không có hỗ trợ safari / ios thì nó không thực sự sử dụng được. Ít nhất chúng ta có ES6 .. dưới đây là một nỗ lực với một lớp kết hợp bao bọc một div hoặc span, biến nó thành một tổ hợp bằng cách đặt một hộp đầu vào lên trên vùng chọn và liên kết các sự kiện có liên quan.

xem mã tại: https://github.com/kofifus/Combo

(mã dựa trên mẫu lớp từ https://github.com/kofifus/New )

Tạo một combo thật dễ dàng! chỉ cần chuyển một div tới hàm tạo của nó:

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>

Cái này nhỏ hơn nhiều, không yêu cầu jquery và hoạt động tốt hơn trong safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Kiểm tra các vấn đề cho việc sửa đổi để thêm một dấu hiệu xuống. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Giải pháp của tôi rất đơn giản, trông giống hệt như một combobox có thể chỉnh sửa gốc và hoạt động ngay cả trong IE6 (một số câu trả lời ở đây yêu cầu rất nhiều mã hoặc thư viện bên ngoài và kết quả là như vậy, ví dụ: văn bản trong hộp văn bản nằm sau biểu tượng thả xuống của phần combobox 'hoặc nó không giống một combobox có thể chỉnh sửa chút nào).

Vấn đề là để cắt hộp kết hợp chỉ biểu tượng thả xuống hiển thị phía trên hộp văn bản. Và hộp văn bản hơi rộng bên dưới phần hộp kết hợp, vì vậy bạn không nhìn thấy phần cuối bên phải của nó - tiếp tục trực quan với hộp kết hợp: 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>

(Được sử dụng ban đầu, ví dụ ở đây, nhưng không gửi biểu mẫu: old.dlubal.com/WishedFeatures.aspx)

CHỈNH SỬA: Các kiểu cần phải khác một chút đối với macOS: Ch ​​là ok, đối với FF, hãy tăng chiều cao của combobox ', Safari và Opera bỏ qua chiều cao của combobox' để tăng kích thước phông chữ của chúng (có giới hạn trên, vì vậy hãy giảm textbox ' chiều cao một chút): https://i.stack.imgur.com/efQ9i.png

Do thẻ danh sách dữ liệu HTML vẫn chưa được hỗ trợ đầy đủ, một cách tiếp cận thay thế mà tôi đã sử dụng là ComboBox của Bộ công cụ Dojo . Nó dễ thực hiện hơn và được ghi lại tốt hơn so với các tùy chọn khác mà tôi đã khám phá. Nó cũng hoạt động tốt với các khuôn khổ hiện có. Trong trường hợp của tôi, tôi đã thêm combobox này vào một trang web hiện có dựa trên Codeigniter và Bootstrap mà không có vấn đề gì. Bạn chỉ cần đảm bảo áp dụng chủ đề Dojo (ví dụ: class = "claro") vào phần tử mẹ của combo thay vì thẻ body để tránh xung đột về kiểu dáng.

Đầu tiên, hãy bao gồm CSS cho một trong các chủ đề Dojo (chẳng hạn như 'Claro'). Điều quan trọng là tệp CSS phải được bao gồm trước các tệp JS bên dưới.

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

Tiếp theo, bao gồm jQuery và Bộ công cụ Dojo qua CDN

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

Tiếp theo, bạn có thể làm theo mã mẫu của Dojo hoặc sử dụng mẫu bên dưới để có được một hộp kết hợp hoạt động.

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

Xem ComboBox hoặc Combo trên trang web này: 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>

Cảm ơn...:)

Không có câu trả lời nào khác khiến bạn hài lòng, phần lớn là do giao diện người dùng vẫn còn tệ. Tôi tìm thấy cái này , trông đẹp và rất gần với sự hoàn hảo cũng như có thể tùy chỉnh.

Bạn có thể tìm thấy danh sách đầy đủ các ví dụ và tùy chọn và những thứ đó ở đây , nhưng đây là bản demo cơ bản:

$('#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>