With a vast database containing 10,000 addresses and 5,000 individuals, I aim to provide users with the ability to search for either an address or a user. My goal is to utilize Twitter's typeahead feature to suggest results as they input text.
To see an example similar to what I envision, check out the NBA demo here: .
I am aware that prefetching 15,000 items could impact speed and load times negatively. Can you suggest a more efficient approach to make this functionality work seamlessly?
Since no one has offered a response, I will proceed with my suggestion.
In managing your extensive database, I recommend utilizing remote paired with typeahead.js. Here's a simple demonstration:
$('#user-search').typeahead({
name: 'user-search',
remote: '/search.php?query=%QUERY' // customization allowed except %QUERY
});
Essentially, as you input characters into the input#user-search, it triggers an AJAX request to the designated page search.php with the content of the input acting as the query parameter.
Within search.php, you can process this query and search for relevant data in your DB:
$query = $_GET['query'].'%'; // adding % for LIKE query later
// execute query
$stmt = $dbh->prepare('SELECT username FROM users WHERE username LIKE = :query');
$stmt->bindParam(':query', $query, PDO::PARAM_STR);
$stmt->execute();
// compile results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
$results[] = $row;
}
// send back response to typeahead
return json_encode($results);
Considering the size of your database, optimizing your SQL query for faster retrieval, implementing caching mechanisms, etc., is essential.
Regarding the typeahead configuration, to reduce DB load, you can set constraints like minLength or limit:
$('#user-search').typeahead({
name: 'user-search',
remote: '/search.php?query=%QUERY',
minLength: 3, // trigger AJAX request after at least 3 characters are typed
limit: 10 // restrict display to only 10 results
});
Regardless of your database's scale, this approach should function effectively.
While this example pertains to PHP, the same principles apply regardless of your backend technology. I trust you grasp the fundamental concepts.
I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...
After exploring numerous posts on this platform, (and even attempting to replicate code,) I am still unable to understand why this particular code is not functioning as expected. On the main page, there is a textbox where users can paste data. Once data i ...
I am working with a table where the selected row is highlighted when a user clicks on it. In another panel, there is a map displaying all employees. Each row in the table has a unique ID and clicking on an employee's image on the map highlights their ...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> function modifycontent() { if (document.getElementById("slider").value<33) { $("#1").fadeIn("slow"); $("#2").fadeOut("slow"); ...
This is my first time posting a question here, even though I am an active user of stackoverflow. I have developed a website using jQuery BBQ to load pages through AJAX while still maintaining the ability to track history with the back button and other fun ...
I recently developed a React component using Material UI which looks like the code snippet below: <Popper open={open} anchorEl={anchorRef.current} onBlur={handleToggle} transition disablePortal > <MenuList autoFocusItem={open}> ...
I have a situation where I need to loop through dates and display table content accordingly. Could someone please assist me in figuring out how to do this? index.html.erb <% @batches.each do |batch| %> <tr> **<td class = "pie" id ...
Measuring the time it takes to download a 1MB file using AJAX calls. Below is the code snippet: var start = new Date(); $(document).ready(function() { $.ajax ({ url: 'https://www.example.com/dummyFile1024', crossDomain: t ...
I'm currently using React along with NextJS to showcase a variety of products on a specific category page. While I am able to successfully fetch the products utilizing getServerSideProps, I am not fond of how it continuously requests the product cata ...
Currently working on mastering binary search and encountering difficulties while trying to use it to locate the "magic index" within an array, where the magic index is defined as A[i] == i. While I have come across some Java implementations using recursio ...
Is there a way to generate flow type in an external component without duplicating types when using it within another component? For instance: import {ExternalComponent} from '@npm-component/another-component'; type CurrentComponentType = {| d ...
I've been exploring different examples of property types in the official documentation and various Github repositories (though now I can't remember which ones). The latter introduced me to unique properties like "min" and "max" for numbers, as we ...
<div class="slider"> <div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> <p class="projectname">Project</p> <p class="clientname">Client Name</p> </div> &l ...
My quest for inserting emojis in a textarea at the exact cursor position has led me to an extensive search on Vue JS techniques. However, most resources available online provide solutions using plain Javascript. Here is the code snippet I am working with: ...
Is it necessary to include parentheses when specifying a function as a success callback if it was defined earlier? What impact does including or not including parentheses have? For example: function fish_food(){//do something} $.ajax({ url: '/ ...
Currently, I am using the json_encode method on data extracted from a table. After applying a var_dump to this variable, it reveals three objects: {"id": "5"} {"id": "6"} {"id": "7"} Here's my process: I have an image with an onclick function: < ...
I'm developing a personalized search feature. Currently, when I type "The R," the search results list starts with The Fellowship of the Ring because the phrase "the ring" is in its .text property. However, I want The Return of the King to appear first ...
I'm currently working on a personal project where I am using ajax and jQuery to load elements onto a page. However, I am facing an issue with displaying specific elements under certain conditions after they have been appended to the DOM. There are ce ...
I am struggling to make my AJAX return only to a specific DIV on the page, instead of displaying it everywhere. Below is my PHP code in file_ajax.php: <?php require_once "../../funct/cfg.php"; if(isset($_POST['id'])){ if(fileDB($_POST[' ...
I am attempting to extract each data from a JSON file and store it in a new array, as I want to create a graph. However, the process is not working as expected. Here is what I expect: f = { "FAKULTAS":"01/FKIP", "FAKULTAS":"02/FMIPA", "FAKULT ...