Skip to content

Instantly share code, notes, and snippets.

@codingwithsara

codingwithsara/index.html Secret

Created October 2, 2019 02:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codingwithsara/e4f8a69d0a1d892add7b2d770f2e23fb to your computer and use it in GitHub Desktop.
Save codingwithsara/e4f8a69d0a1d892add7b2d770f2e23fb to your computer and use it in GitHub Desktop.
Download ZIP
JQ Auto Complete 5
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery Auto Complete</title>
<style>
.container {
margin: 100px auto;
text-align: center;
}
#inputField {
width: 300px;
height: 40px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h2>都道府県を選択</h2>
<input type="text" id="inputField" class="pre">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var data = [
"北海道",
"青森県",
"岩手県",
"宮城県",
"秋田県",
"山形県",
"福島県",
"茨城県",
"栃木県",
"群馬県",
"埼玉県",
"千葉県",
"東京都",
"神奈川県",
"新潟県",
"富山県",
"石川県",
"福井県",
"山梨県",
"長野県",
"岐阜県",
"静岡県",
"愛知県",
"三重県",
"滋賀県",
"京都府",
"大阪府",
"兵庫県",
"奈良県",
"和歌山県",
"鳥取県",
"島根県",
"岡山県",
"広島県",
"山口県",
"徳島県",
"香川県",
"愛媛県",
"高知県",
"福岡県",
"佐賀県",
"長崎県",
"熊本県",
"大分県",
"宮崎県",
"鹿児島県",
"沖縄県"
];
$(function(){
$("#inputField").autocomplete({
source: data
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment