Skip to content

Instantly share code, notes, and snippets.

@wuriyanto48

wuriyanto48/index.html

Created June 20, 2024 09:08
Show Gist options
  • Save wuriyanto48/6475b2e5535e62eddef01445e97a08d7 to your computer and use it in GitHub Desktop.
Save wuriyanto48/6475b2e5535e62eddef01445e97a08d7 to your computer and use it in GitHub Desktop.
Download ZIP
jquery: auto complete
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<script>
$(function () {
var data = [
{
query: "Apakah masa Cuti Pendidikan Mandiri mengurangi masa kerja?",
search_query: "<i class=\"fa fa-file\"></i> Apakah masa Cuti Pendidikan Mandiri mengurangi masa kerja?",
search_type: "direct_link"
},
{
query: "Bagaimana cara mengajukan Cuti Pendidikan Mandiri?",
search_query: "<i class=\"fa fa-file\"></i> Bagaimana cara mengajukan Cuti Pendidikan Mandiri?",
search_type: "direct_link"
},
{
query: "Apa saja persyaratan untuk Cuti Pendidikan Mandiri?",
search_query: "<i class=\"fa fa-file\"></i> Apa saja persyaratan untuk Cuti Pendidikan Mandiri?",
search_type: "direct_link"
},
{
query: "Berapa lama durasi maksimal Cuti Pendidikan Mandiri?",
search_query: "<i class=\"fa fa-file\"></i> Berapa lama durasi maksimal Cuti Pendidikan Mandiri?",
search_type: "direct_link"
},
{
query: "Apakah Cuti Pendidikan Mandiri dibayar?",
search_query: "<i class=\"fa fa-file\"></i> Apakah Cuti Pendidikan Mandiri dibayar?",
search_type: "direct_link"
},
{
query: "Bagaimana pengaruh Cuti Pendidikan Mandiri terhadap tunjangan?",
search_query: "<i class=\"fa fa-file\"></i> Bagaimana pengaruh Cuti Pendidikan Mandiri terhadap tunjangan?",
search_type: "direct_link"
},
{
query: "Apakah Cuti Pendidikan Mandiri dapat diperpanjang?",
search_query: "<i class=\"fa fa-file\"></i> Apakah Cuti Pendidikan Mandiri dapat diperpanjang?",
search_type: "direct_link"
},
{
query: "Bagaimana prosedur kembali bekerja setelah Cuti Pendidikan Mandiri?",
search_query: "<i class=\"fa fa-file\"></i> Bagaimana prosedur kembali bekerja setelah Cuti Pendidikan Mandiri?",
search_type: "direct_link"
},
{
query: "Apakah ada batasan jumlah Cuti Pendidikan Mandiri yang dapat diambil?",
search_query: "<i class=\"fa fa-file\"></i> Apakah ada batasan jumlah Cuti Pendidikan Mandiri yang dapat diambil?",
search_type: "direct_link"
},
{
query: "Apa yang terjadi jika Cuti Pendidikan Mandiri tidak disetujui?",
search_query: "<i class=\"fa fa-file\"></i> Apa yang terjadi jika Cuti Pendidikan Mandiri tidak disetujui?",
search_type: "direct_link"
}
];
$("#auto-complete").autocomplete({
source: function (request, response) {
response($.map(data, function (value, key) {
var term = request.term.toUpperCase();
var q = value.query.toUpperCase();
if (q.includes(term)) {
return {
label: value.query,
value: value.search_query,
search_type: value.search_type
}
}
return null;
}));
},
focus: function(event, ui) {
event.preventDefault();
},
select: function (event, ui) {
event.preventDefault();
window.location.href = '/search?origin=search_bar&search_type='+ui.item.search_type+'&q='+ui.item.label;
}
}).autocomplete().data("ui-autocomplete")._renderItem = function (ul, item) {
retval = $("<li>")
.append("<span><a href='/search/?q=" + item.label + "' class='text-link' >" + item.value + "</a></span>")
.appendTo(ul)
return retval
};
});
</script>
</head>
<body>
<label for="auto-complete">Tags: </label>
<input id="auto-complete">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment