I'm creating a Django site, on a certain template i added an Ajax form and i would like to add an autoplete feature, in order to make navigation easier.
My main problem is that the data i should search is a JSON array of objects, while most of the solutions i found work with normal arrays.
Here is what i have now:
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
//Autoplete
});
});
</script>
<input type="text" id='firstfield' name='input_val'>
This is what the data looks like, it's around 700 records; here are the first three:
"results": [
{
"item": "First",
"id": "1847",
},
{
"item": "Second",
"id": "4442",
},
{
"item": "Third",
"id": "3847",
}]
I need this to be as fast as possible. Is there a JQuery/Ajax native solution for this? Or is there a specific library to do this? Any advice or solution is appreciated, thanks in advance!
I'm creating a Django site, on a certain template i added an Ajax form and i would like to add an autoplete feature, in order to make navigation easier.
My main problem is that the data i should search is a JSON array of objects, while most of the solutions i found work with normal arrays.
Here is what i have now:
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
//Autoplete
});
});
</script>
<input type="text" id='firstfield' name='input_val'>
This is what the data looks like, it's around 700 records; here are the first three:
"results": [
{
"item": "First",
"id": "1847",
},
{
"item": "Second",
"id": "4442",
},
{
"item": "Third",
"id": "3847",
}]
I need this to be as fast as possible. Is there a JQuery/Ajax native solution for this? Or is there a specific library to do this? Any advice or solution is appreciated, thanks in advance!
Share Improve this question asked Feb 19, 2020 at 12:52 Jack022Jack022 1,3077 gold badges50 silver badges111 bronze badges 2-
Like this? jqueryui./autoplete Changing the array is simple:
data.results.map(obj => obj.item)will result in an array of the items. – user5734311 Commented Feb 19, 2020 at 12:55 - Yeah, autoplete is a valid solution, i just don't understand what to use between typehead and autoplete – Jack022 Commented Feb 19, 2020 at 13:26
3 Answers
Reset to default 2You could use the jQuery Typeahead Search plugin. Just set-up your form to use the proper nesting of classes as seen below.
$(() => {
//$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
let data = {
"results": [
{ "item": "First", "id": "1847" },
{ "item": "Second", "id": "4442" },
{ "item": "Third", "id": "3847" }
]
};
$('#first-field').typeahead({
source: {
data: data.results.map(record => record.item)
},
callback: {
onInit: function($el) {
console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
}
}
});
//})
});<link href="https://cdnjs.cloudflare./ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<h1>jQuery Typeahead</h1>
<form>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input id="first-field" name="first-field" placeholder="Search" autoplete="off">
</div>
<div class="typeahead__button">
<button type="submit"><i class="typeahead__search-icon"></i></button>
</div>
</div>
</div>
</form>Try this one:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autoplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
$( "#tags" ).autoplete({
source: data
});
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
You can use Jquery autoplete() function
Here is the link https://jqueryui./autoplete/
$( "#tags" ).autoplete({
source: availableTags
});
} );
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure"}