入力フィールドに推薦リストを動的に追加する

Question

ドロップダウンリコメンデーションリストを入力フィールドに動的に追加します。だから誰かが入力フィールドをクリックするとそこにドロップダウンがあり、誰かが任意のオプションを選択すると入力フィールドの値を更新する必要があります。

この編集可能なテキストが入力ボックスのIDである場合、このコードを使用しようとしています。

$('#demo').on('click', '#editabletext', function (e) 
 
      { 
 

 
      var det = '<select id=\'dropdownlist\'><option value=\'1\'>1</option><option value=\'4\'>4</option><option value=\'5\'>5</option></select>'; 
 
       $(e.target).append(det); 
 
      });

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

 
<div class="demo"> 
 
    <input id="editabletext" /> 
 
</div>

Answer 1

これはあなたの問題の簡単な解決策である下のスニペットにテキストボックスにPHPまたはLispのを入力してみてください、それを試してみる：

を

$('#editabletext').click(function(e) { 
 
    $("#NavDropdownListContainer").css('visibility', 'visible') 
 
}); 
 

 
$('.ms-qSuggest-listItem').click(function() { 
 
    $('#editabletext').val($(this).text()) 
 
    $("#NavDropdownListContainer").css('visibility', 'hidden') 
 
})

.ms-qSuggest-listItem { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="editabletext" type=text> 
 

 

 
<div id="NavDropdownListContainer" style="display: block; visibility: hidden; position: absolute;"> 
 
    <div style="width: 249px;"> 
 
    <div class="ms-qSuggest-listItem">Everything</div> 
 
    <div class="ms-qSuggest-listItem">People</div> 
 
    <div class="ms-qSuggest-listItem">Conversations</div> 
 
    <div class="ms-qSuggest-listItem">This Site</div> 
 
    </div> 
 
</div>

Answer 2

jQueryのUIは、すでにそのまた、無料、autocompleteでこれを行います。

$(function() { 
 
    var availableTags = [ 
 
     "ActionScript", 
 
     "AppleScript", 
 
     "Asp", 
 
     "BASIC", 
 
     "C", 
 
     "C++", 
 
     "Clojure", 
 
     "COBOL", 
 
     "ColdFusion", 
 
     "Erlang", 
 
     "Fortran", 
 
     "Groovy", 
 
     "Haskell", 
 
     "Java", 
 
     "JavaScript", 
 
     "Lisp", 
 
     "Perl", 
 
     "PHP", 
 
     "Python", 
 
     "Ruby", 
 
     "Scala", 
 
     "Scheme" 
 
    ]; 
 
    $("#tags").autocomplete({ 
 
     source: availableTags 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="ui-widget"> 
 
    <label for="tags">Tags: </label> 
 
    <input id="tags"> 
 
</div>

Answer 3

ここでは、全体の要素を取得するためのソリューションhttps://jsfiddle.net/5wnofhjc/

$(document).on('click', 'input#editabletext', function (e){ 
 
    var det = `<ul id='dropdownlist'> 
 
       <li value='1'>1</li> 
 
       <li value='4'>4</li> 
 
       <li value='5'>5</li> 
 
      </ul>`; 
 
    $(this).after(det); 
 
    $('#dropdownlist').css('width', $(this).width()); 
 
});

ul { 
 
    list-style-type: none; 
 
    box-shadow: 0px 0px 1px 0px #000; 
 
    position: absolute; 
 
    margin-top: 0px; 
 
    padding: 0px; 
 
} 
 

 
li { 
 
    background: #fff; 
 
    border: 1px solid rgba(0,0,0,0.2); 
 
} 
 

 
#demo { 
 
    postion: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="demo"> 
 
    <input id="editabletext" type=text> 
 
</div>

代わりに、単一または二重引用符のあなたbacktickで行きます。

希望すると、これが役立ちます。