編集可能な選択と自動完了javascript

Question

私は自分のjspでselectを持っていて、要素を編集可能にする必要があり、ユーザーはselectに値を見つけるためにselectに書き込むことができます。

jsやjQueryを使ってどうすればいいですか？

My selectはMySQLから値を取得します。

<div class="col-md-2">Descripcion:</div> 
<div class="col-md-3"> 
    <select title="0" contenteditable="true" class="form-control cbDescripcion"></select> 
</div> 

Answer 1

• あなたは<select>にcontenteditableを設定することはできません。

• 検索可能魔女は、Ajaxのような高度なオプションを使用して、静的な選択リストを上書き 選択リストを作成するselect2のような複数のjQueryのプラグインがあります。

• 以下は、検索可能なドロップダウンメニューの例です。また、ajax呼び出しで。

$("#search").on("keyup", function() { 
 
    //to call ajax 
 
    //remoteSearch(); 
 
    //or static search 
 
    var v = this.value.replace(/\s+/g, " ").trim().toLowerCase(); 
 
    if (v == "") return $(".option").hide(); 
 
    $(".option").hide(); 
 
    $(".option").each(function() { 
 
    var t = $(this).text().toLowerCase(); 
 
    if (t.indexOf(v) > -1) $(this).show(); 
 
    }); 
 
}); 
 

 
$(document).on("click", ".option", function() { 
 
    $("#search").val($(this).text()); 
 
    $(".option").hide(); 
 
}); 
 

 
function remoteSearch() { 
 
    $.ajax({ 
 
    url: "data.php", 
 
    data: { 
 
     "search": $("#search").val() //search box value 
 
    }, 
 
    dataType: "json", // recommended response type 
 
    success: function(data) { 
 
     //data = ["name1","name2","name3"]; 
 
     $(".options").html(""); //remove list 
 
     $.each(data, function(i, v) { 
 
     $(".options").append("<li class='option'>" + v + "</li>"); 
 
     }); 
 
    }, 
 
    error: function() { 
 
     alert("can't connect to db"); 
 
    } 
 
    }); 
 
}

#search { 
 
    padding: 5px; 
 
} 
 
#select-containe { 
 
    width: 200px; 
 
} 
 
.option { 
 
    padding: 5px; 
 
    display: none; 
 
    color: white; 
 
    background: orange; 
 
    cursor: hand; 
 
} 
 
.option:hover { 
 
    color: orange; 
 
    background: white; 
 
} 
 
.options { 
 
    height: 100px; 
 
    width: 190px; 
 
    overflow: auto; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='select-container'> 
 
    <input id='search' placeholder='search names' /> 
 
    <ul class='options'> 
 
    <li class='option'>Mohamed</li> 
 
    <li class='option'>Ahmed</li> 
 
    <li class='option'>Mahmoud</li> 
 
    <li class='option'>Mustafa</li> 
 
    <li class='option'>mohamed</li> 
 
    <li class='option'>ahmed</li> 
 
    <li class='option'>mahmoud</li> 
 
    <li class='option'>mustafa</li> 
 
    </ul> 
 
</div> 
 
choose names from above list