More elegant way to use database outputs in a search shortlist [javascript/jquery]
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
0
down vote
favorite
I'm just trying to make a search bar that will allow the users to type in a substring of any page on my website, and the search bar will shortlist page names that are consistent with what they've typed.
I'm ajaxing in relevant pages, though I'm wondering whether it's more expensive to do ajaxes than just download a list of every possible page at the beginning, even if it's thousands? The list of pages is stored in a MySQL table. I'm also wondering whether there are other ways to make the code more elegant?
NOTE: I've simplified where the Ajaxing occurs to make it run, everything else is working code I'm using in my project.
My solution:
search_block = false;
$("#search_bar_input").on("keyup",function()
if(search_block == false)
search_block = true;
setTimeout(function() //timeout to block overburdening of ajaxing of databases
search_block = false;
console.dir($("#search_bar_input").val());
var search_term = $("#search_bar_input").val();
// NOTE: this ajax_output below represents what sort of output the ajax is generating.
ajax_output = ["input1", "input2", "input3", "input4"];
$("#search_bar_input" ).autocomplete(
source: ajax_output,
);
$('#search_bar_input').autocomplete("search"); // or else the text in the search input isn't implemented after the timeout completes
, 1000);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<form class="form-inline my-2 my-lg-0">
<div>
<input id="search_bar_input" class="form-control mr-sm-2 typeahead" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>javascript jquery ajax
edited Mar 23 at 8:32
Billal BEGUERADJ
1
asked Mar 23 at 8:27
it Haffens
12
add a comment |Â
up vote
0
down vote
favorite
I'm just trying to make a search bar that will allow the users to type in a substring of any page on my website, and the search bar will shortlist page names that are consistent with what they've typed.
I'm ajaxing in relevant pages, though I'm wondering whether it's more expensive to do ajaxes than just download a list of every possible page at the beginning, even if it's thousands? The list of pages is stored in a MySQL table. I'm also wondering whether there are other ways to make the code more elegant?
NOTE: I've simplified where the Ajaxing occurs to make it run, everything else is working code I'm using in my project.
My solution:
search_block = false;
$("#search_bar_input").on("keyup",function()
if(search_block == false)
search_block = true;
setTimeout(function() //timeout to block overburdening of ajaxing of databases
search_block = false;
console.dir($("#search_bar_input").val());
var search_term = $("#search_bar_input").val();
// NOTE: this ajax_output below represents what sort of output the ajax is generating.
ajax_output = ["input1", "input2", "input3", "input4"];
$("#search_bar_input" ).autocomplete(
source: ajax_output,
);
$('#search_bar_input').autocomplete("search"); // or else the text in the search input isn't implemented after the timeout completes
, 1000);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<form class="form-inline my-2 my-lg-0">
<div>
<input id="search_bar_input" class="form-control mr-sm-2 typeahead" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>javascript jquery ajax
edited Mar 23 at 8:32
Billal BEGUERADJ
1
asked Mar 23 at 8:27
it Haffens
12
add a comment |Â
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm just trying to make a search bar that will allow the users to type in a substring of any page on my website, and the search bar will shortlist page names that are consistent with what they've typed.
I'm ajaxing in relevant pages, though I'm wondering whether it's more expensive to do ajaxes than just download a list of every possible page at the beginning, even if it's thousands? The list of pages is stored in a MySQL table. I'm also wondering whether there are other ways to make the code more elegant?
NOTE: I've simplified where the Ajaxing occurs to make it run, everything else is working code I'm using in my project.
My solution:
search_block = false;
$("#search_bar_input").on("keyup",function()
if(search_block == false)
search_block = true;
setTimeout(function() //timeout to block overburdening of ajaxing of databases
search_block = false;
console.dir($("#search_bar_input").val());
var search_term = $("#search_bar_input").val();
// NOTE: this ajax_output below represents what sort of output the ajax is generating.
ajax_output = ["input1", "input2", "input3", "input4"];
$("#search_bar_input" ).autocomplete(
source: ajax_output,
);
$('#search_bar_input').autocomplete("search"); // or else the text in the search input isn't implemented after the timeout completes
, 1000);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<form class="form-inline my-2 my-lg-0">
<div>
<input id="search_bar_input" class="form-control mr-sm-2 typeahead" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>javascript jquery ajax
edited Mar 23 at 8:32
Billal BEGUERADJ
1
asked Mar 23 at 8:27
it Haffens
12
I'm just trying to make a search bar that will allow the users to type in a substring of any page on my website, and the search bar will shortlist page names that are consistent with what they've typed.
I'm ajaxing in relevant pages, though I'm wondering whether it's more expensive to do ajaxes than just download a list of every possible page at the beginning, even if it's thousands? The list of pages is stored in a MySQL table. I'm also wondering whether there are other ways to make the code more elegant?
NOTE: I've simplified where the Ajaxing occurs to make it run, everything else is working code I'm using in my project.
My solution:
search_block = false;
$("#search_bar_input").on("keyup",function()
if(search_block == false)
search_block = true;
setTimeout(function() //timeout to block overburdening of ajaxing of databases
search_block = false;
console.dir($("#search_bar_input").val());
var search_term = $("#search_bar_input").val();
// NOTE: this ajax_output below represents what sort of output the ajax is generating.
ajax_output = ["input1", "input2", "input3", "input4"];
$("#search_bar_input" ).autocomplete(
source: ajax_output,
);
$('#search_bar_input').autocomplete("search"); // or else the text in the search input isn't implemented after the timeout completes
, 1000);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<form class="form-inline my-2 my-lg-0">
<div>
<input id="search_bar_input" class="form-control mr-sm-2 typeahead" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>search_block = false;
$("#search_bar_input").on("keyup",function()
if(search_block == false)
search_block = true;
setTimeout(function() //timeout to block overburdening of ajaxing of databases
search_block = false;
console.dir($("#search_bar_input").val());
var search_term = $("#search_bar_input").val();
// NOTE: this ajax_output below represents what sort of output the ajax is generating.
ajax_output = ["input1", "input2", "input3", "input4"];
$("#search_bar_input" ).autocomplete(
source: ajax_output,
);
$('#search_bar_input').autocomplete("search"); // or else the text in the search input isn't implemented after the timeout completes
, 1000);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<form class="form-inline my-2 my-lg-0">
<div>
<input id="search_bar_input" class="form-control mr-sm-2 typeahead" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>search_block = false;
$("#search_bar_input").on("keyup",function()
if(search_block == false)
search_block = true;
setTimeout(function() //timeout to block overburdening of ajaxing of databases
search_block = false;
console.dir($("#search_bar_input").val());
var search_term = $("#search_bar_input").val();
// NOTE: this ajax_output below represents what sort of output the ajax is generating.
ajax_output = ["input1", "input2", "input3", "input4"];
$("#search_bar_input" ).autocomplete(
source: ajax_output,
);
$('#search_bar_input').autocomplete("search"); // or else the text in the search input isn't implemented after the timeout completes
, 1000);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<form class="form-inline my-2 my-lg-0">
<div>
<input id="search_bar_input" class="form-control mr-sm-2 typeahead" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>javascript jquery ajax
edited Mar 23 at 8:32
Billal BEGUERADJ
1
asked Mar 23 at 8:27
it Haffens
12
edited Mar 23 at 8:32
Billal BEGUERADJ
1
edited Mar 23 at 8:32
Billal BEGUERADJ
1
edited Mar 23 at 8:32
Billal BEGUERADJ
1
1
asked Mar 23 at 8:27
it Haffens
12
asked Mar 23 at 8:27
it Haffens
12
asked Mar 23 at 8:27
it Haffens
12
12
add a comment |Â
add a comment |Â
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Â
draft saved
draft discarded
Â
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f190276%2fmore-elegant-way-to-use-database-outputs-in-a-search-shortlist-javascript-jquer%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password