Listede bulunan herhangi bir değeri seçmenin yanı sıra birleşik giriş kutusuna yazabileceğiniz izlenimi altındaydım. Ancak, bunun nasıl yapılacağına dair bilgi bulamıyorum. Metnin yazılmasına izin vermek için eklemem gereken bir özellik var mı?

Daha önce datalist(aşağıdaki nota bakın), inputkişilerin kendi tercihlerine göre yazmaları için ek bir öğe sağlarsınız.

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

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

Bu mekanizma tüm tarayıcılarda çalışır ve JavaScript gerektirmez .

Yalnızca input"Diğer" seçeneği belirlenmişse gösterme konusunda akıllıca davranmak için biraz JavaScript kullanabilirsiniz .

veri uzmanı Öğesi

datalistEleman bu kavramın daha iyi bir mekanizma sağlamak amaçlanmaktadır. Bazı tarayıcılarda, örneğin iOS Safari <12.2, bu desteklenmiyordu veya uygulamada sorunlar vardı. Mevcut veri listesi desteğini görmek için Kullanabilir miyim sayfasına bakın .

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

HTML'de bunu geriye doğru yaparsınız: Bir metin girişi tanımlarsınız:

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

ve ona bir veri uzmanı ekleyin. (girişin liste niteliğine dikkat edin).

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

Bu bağlantı size yardımcı olabilir: http://www.scriptol.com/html5/combobox.php

İki örneğiniz var. Biri html4'te ve diğeri html5'te

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

Buradaki dojoörnek, çoğu durumda mevcut koda uygulandığında çalışmaz. Bu nedenle, burada bulunan bir alternatif bulmam gerekiyordu - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (şimdi bir spam sitesine veya daha kötüsüne işaret ediyor )

archive.org (pek kullanışlı değil)

İşte jsfiddle - https://jsfiddle.net/ze7fgby7/

Peki, 2016 yılı ve combo yapmanın hala kolay bir yolu yok ... tabii ki veri uzmanımız var ama safari / ios desteği olmadan bu gerçekten kullanılabilir değil. En azından ES6'ya sahibiz. Aşağıda, ilgili olayları seçip bağlayarak bir giriş kutusu koyarak bir div veya span saran, onu bir komboya dönüştüren bir kombo sınıf denemesidir.

koda bakın: https://github.com/kofifus/Combo

(kod, https://github.com/kofifus/New adresindeki sınıf modeline dayanır )

Bir kombo oluşturmak çok kolay! yapıcısına bir div iletin:

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>

Bu çok daha küçük, jquery gerektirmiyor ve safaride daha iyi çalışıyor. https://github.com/Fyrd/purejs-datalist-polyfill/

Bir küçülme eklemek için değişiklik sorunlarını kontrol edin. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Benim çözümüm çok basit, tam olarak yerel düzenlenebilir birleşik giriş kutusu gibi görünüyor ve yine de IE6'da bile çalışıyor (buradaki bazı cevaplar çok sayıda kod veya harici kitaplık gerektiriyor ve sonuç öyle, örneğin metin kutusundaki metin açılır simgesinin arkasına gidiyor birleşik giriş kutusunun bölümü veya düzenlenebilir bir birleşik giriş kutusu gibi görünmüyor).

Amaç, birleşik giriş kutusunu yalnızca açılır simgenin metin kutusunun üzerinde görünecek şekilde kırpmaktır. Ve metin kutusu, birleşik giriş kutusu bölümünün biraz altında geniş olduğundan sağ ucunu görmüyorsunuz - görsel olarak birleşik giriş kutusu ile devam ediyor: 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>

(Orijinal olarak, örneğin burada kullanılır, ancak şu formu göndermeyin: old.dlubal.com/WishedFeatures.aspx)

DÜZENLEME: Stillerin macOS için biraz farklı olması gerekiyor: Ch tamam, FF için combobox'un yüksekliğini artırın, Safari ve Opera, combobox'un yüksekliğini göz ardı eder, bu yüzden yazı tipi boyutunu artırın (bir üst sınırı vardır, bu yüzden metin kutusunu azaltın '' yükseklik biraz): https://i.stack.imgur.com/efQ9i.png

HTML datalist etiketinin hala tam olarak desteklenmediği göz önüne alındığında, kullandığım alternatif bir yaklaşım Dojo Toolkit ComboBox'tır . Araştırdığım diğer seçeneklere göre uygulamak daha kolaydı ve daha iyi belgelendi. Ayrıca mevcut çerçevelerle de iyi oynuyor. Benim durumumda, bu birleşik giriş kutusunu Codeigniter ve Bootstrap tabanlı mevcut bir web sitesine sorunsuz bir şekilde ekledim Dojo temasını (örneğin, class = "claro") body etiketi yerine combo'nun ana öğesine uyguladığınızdan emin olmanız yeterlidir. stil çatışmalarını önlemek için.

İlk olarak, Dojo temalarından biri için CSS'yi dahil edin ('Claro' gibi). CSS dosyasının aşağıdaki JS dosyalarından önce eklenmesi önemlidir.

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

Ardından, jQuery ve Dojo Toolkit'i CDN aracılığıyla dahil edin

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

Ardından, Dojo'nun örnek kodunu takip edebilir veya aşağıdaki örneği kullanarak çalışan birleşik bir kutu elde edebilirsiniz .

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

Bu sitedeki ComboBox veya Combo'ya bakın: 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>

Teşekkürler...:)

Diğer yanıtların hiçbiri tatmin edici değildi, çünkü büyük ölçüde kullanıcı arayüzü hala kötü görünüyor. buldum bu iyi görünüyor ve varlık de mükemmel gibi özelleştirilebilir çok yakın olan.

Örneklerin, seçeneklerin ve benzerlerinin tam listesi burada bulunabilir , ancak işte temel bir 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>