Wydawało mi się, że można wpisać w polu kombi oprócz wyboru wartości znajdujących się już na liście. Jednak nie mogę znaleźć informacji, jak to zrobić. Czy jest jakaś właściwość, którą muszę dodać, aby umożliwić wpisywanie tekstu?

Wcześniej datalist(patrz uwaga poniżej) należałoby zapewnić dodatkowy inputelement, aby ludzie mogli wpisać własną opcję.

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

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

Ten mechanizm działa we wszystkich przeglądarkach i nie wymaga JavaScript .

Możesz użyć trochę JavaScript, aby sprytnie pokazać tylko inputopcję „Inne”.

Element datalist

datalistElementem jest zapewnienie lepszego mechanizmu tej koncepcji. W niektórych przeglądarkach, np. IOS Safari <12.2, nie było to obsługiwane lub implementacja miała problemy. Sprawdź stronę Can I Use, aby zobaczyć aktualne wsparcie dla datalist .

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

w HTML robisz to od tyłu: definiujesz wejście tekstu:

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

i dołącz do niego datalist. (zwróć uwagę na atrybut listy wejścia).

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

Ten link może Ci pomóc: http://www.scriptol.com/html5/combobox.php

Masz dwa przykłady. Jeden w html4, a drugi w 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;
 }

dojoPrzykład tutaj nie działają, gdy stosowane do istniejącego kodu w większości przypadków. Dlatego musiałem znaleźć alternatywę, znalezioną tutaj - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (teraz wskazuje na stronę ze spamem lub gorzej )

archive.org (niezbyt przydatne)

Oto jsfiddle - https://jsfiddle.net/ze7fgby7/

Cóż, jest rok 2016 i nadal nie ma łatwego sposobu na zrobienie kombinacji ... na pewno mamy datalist, ale bez obsługi safari / ios nie jest to naprawdę użyteczne. Przynajmniej mamy ES6 .. poniżej jest próbą zastosowania klasy combo, która zawija element div lub span, zamieniając go w combo, umieszczając pole wejściowe na górze selekcji i wiążąc odpowiednie zdarzenia.

zobacz kod na: https://github.com/kofifus/Combo

(kod opiera się na wzorcu klasy z https://github.com/kofifus/New )

Tworzenie combo jest łatwe! po prostu przekaż element div do jego konstruktora:

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>

Ten jest znacznie mniejszy, nie wymaga jquery i lepiej sprawdza się w safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Sprawdź problemy związane z modyfikacją, aby dodać dół. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Moje rozwiązanie jest bardzo proste, wygląda dokładnie jak natywny edytowalny combobox, a jednak działa nawet w IE6 (niektóre odpowiedzi tutaj wymagają dużej ilości kodu lub zewnętrznych bibliotek i wynik jest taki, np. Tekst w polu tekstowym znajduje się za rozwijaną ikoną części combobox lub w ogóle nie wygląda jak edytowalny combobox).

Chodzi o to, aby przyciąć combobox tylko ikonę rozwijaną, aby była widoczna nad polem tekstowym. Pole tekstowe jest nieco szersze pod częścią combobox, więc nie widać jego właściwego końca - wizualnie kontynuuje combobox: 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>

(Używany pierwotnie np. Tutaj, ale nie wysyłaj formularza: old.dlubal.com/WishedFeatures.aspx)

EDYCJA: Style muszą być trochę inne dla macOS: Ch ​​jest ok, dla FF zwiększ wysokość combobox, Safari i Opera ignorują wysokość combobox, więc zwiększ rozmiar czcionki (ma górny limit, więc zmniejsz pole tekstowe) wysokość): https://i.stack.imgur.com/efQ9i.png

Biorąc pod uwagę, że znacznik datalist HTML nadal nie jest w pełni obsługiwany, alternatywnym podejściem, którego użyłem, jest Dojo Toolkit ComboBox . Było łatwiejsze do wdrożenia i lepiej udokumentowane niż inne opcje, które badałem. Dobrze współpracuje również z istniejącymi frameworkami. W moim przypadku dodałem ten zestaw do istniejącej witryny internetowej opartej na Codeigniter i Bootstrap bez żadnych problemów. Wystarczy upewnić się, że zastosowałeś motyw Dojo (np. Class = "claro") do elementu nadrzędnego combo zamiast tagu body aby uniknąć konfliktów stylizacji.

Najpierw dołącz CSS dla jednego z motywów Dojo (np. „Claro”). Ważne jest, aby plik CSS był dołączony przed poniższymi plikami JS.

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

Następnie dołącz jQuery i Dojo Toolkit przez 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>

Następnie możesz po prostu śledzić za przykładowym kodem Dojo lub skorzystać z przykładu poniżej, aby uzyskać działający 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>

Spójrz na ComboBox lub Combo w tej witrynie: 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>

Dzięki...:)

Żadna z pozostałych odpowiedzi nie była satysfakcjonująca, głównie dlatego, że interfejs użytkownika nadal wygląda źle. Znalazłem to , które wygląda dobrze i jest bardzo bliskie doskonałości, a także możliwości dostosowania.

Pełną listę przykładów i opcji i takich można znaleźć tutaj , ale tutaj jest podstawowe demo:

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>