「jQuery」オートコンプリート(autocomplete)のサンプル

2021年8月1日

書式
$(セレクタ).autocomplete(xx)
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<label for="label1">please enter text: </label>
<input type="text" id="cft" maxlength="5">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
const cft = ["ttA","ttB","ttC","ttD"];
// オートコンプリート
$("#cft").autocomplete({
source:cft
});
});
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <label for="label1">please enter text: </label> <input type="text" id="cft" maxlength="5"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { const cft = ["ttA","ttB","ttC","ttD"]; // オートコンプリート $("#cft").autocomplete({ source:cft }); }); </script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<label for="label1">please enter text: </label>
<input type="text" id="cft" maxlength="5">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
      const cft = ["ttA","ttB","ttC","ttD"];

      // オートコンプリート
      $("#cft").autocomplete({
            source:cft
      });
});
</script>

 

jQuery

Posted by arkgame