So simply put I'm trying to make a simple search engine where I've got a MySQL database and its contents being displayed on a HTML table (using PHP to get the information) and I want to make a search bar that as you type, filters the list automatically.
I've found tutorials on how to make that with plain text where it displays in just a list, but nothing on how to filter an already displayed table.
If someone could point in me in the direction of some helpful links or maybe some code I could use to start me off that would be great, sorry if this has been answered before, I've been looking for 20 odd minutes and just can't find anything that works.
TLDR: Making a search bar that as you type, filters an HTML table filled a with MySQL database table's information brought onto the page via PHP code, cant find any tutorials or helpful links/code after 20-ish min of searching and came here.
This is done with AJAX. You have to use javascript if you want to display it live when the user is typing. Since you want a shoot in the right direction, here is the place to go :
http://www.w3schools.com/php/php_ajax_php.asp
You will need to use SQL to populate the array in your case.
Concept is when you type some javascript trigger a event with the data you typed, like this.
$( "input[type='text']" ).change(function() {
var typedValue = $( this ).val();
//AJAX CALL HERE
});
Ajax calls a PHP page with the data posted, and use that data in your select Query.
Standard example of select query
Related
I want to display my data coming from sql db to front end. I want it to be displayed in some special manner.
Lets assume I have 8 element in total. I want to display only 3 data field at first in a row, and below that a message saying 'show remaining 5'.
Once someone click that another three should load and below a message would show 'show remaining 1'.
I am not asking for a ..read more type option. I want to display remaining data into segments, but not all at once. If anyone can guide me, what can I use or if there is any useful plugin, I am already grateful.
Thanks in advance for anyone who put some effort.
This sounds like something that would be done by JavaScript. This means building the whole table right away, but hiding all but the top 3 rows. Then hook a function to the "Show three more" button, that displays three more rows (until all is shown).
jQuery is a JavaScript library that is easy to get into and would help you get this kind of functionality going, but it is of course entirely possible to do without it.
If you are entirely new to web development with php, sql, html, and javascript I suggest looking at basic tutorials on how to accomplish the basics first, such as fetching data from a db, displaying that in html and how to modify the DOM with javascript.
You need to provide more information, but im gonna answer according to what i understood.
First you need to put the data in a table using <table><tbody><tr></tr></tbody></table>.
Then you can hide the other 5 data fields using css, you can use visibility: hidden or display:none.
Then you can display a message using bootstrap alert class thats says 5 other fields remaining.
I have a small project where i did a table excel-like. Each table cell contains a disabled input, and when you click any cell that input becomes enabled so you can type, changes the color of that cell+the entire row, and you can switch to next row using TAB, or next line using ENTER, or UP and DOWN for the cell above or below it. When the row is changed it will call an ajax function to update the data to the database.
That was the project description so far. My problem is:
I need to have auto-complete on some columns of the table. I tried so far Bootstrap typeahead, JqueryUI autocomplete and a couple of others more. None of them seem to work for my case. The main reason is that they overwrite my events.
I tried to add the autocomplete function on one specific cell only, to test how it works. And that cell won't become enable when i click it because my javascript is disabled by that autocomplete.
I tried to enable it from code to see how it works, and indeed the autocomplete seem to show up, but then my UP and DOWN arrowkeys are messed up.
Any idea on how to get an autocomplete to work on this case?
Thank you, any idea is much appreciated, I've been brainstorming on this for 2 days.
here is a very simple script that can do the Job... http://dev.twiip.ch/scripts/autocomplete/
they link provide an easy example to select some data from a mysql database using php and ajax.
it is in french, you can use google translate to understand.
I am currently using Jquery UI to display checkboxes, which right now, don't do anything!
you can see the current set up here: rickymason.net/letschat/main/home/
I am still trying to understand JSON, AJAX and Javascript...but i know they are required to make this work:
When the user checks one, or more of the checkboxes, I'd like it to refresh the thread list at the bottom of the page based on which list is checked.
I don't need exact code (though the more the merrier!), just a good outline on the process that needs to take place.
I'm using codeigniter, thus php and mysql. The thread list is generated based on a * query for the threads table. Then, it is filtered based on a session variable which contains all active filters (user input, AND i'd also like it to be selectable via the jquery select box).
Any help is greatly appreciated!
The magic word here is AJAX.
Use jQuery to bind to the events of the form elements
Send the event through AJAX calls to the server
Parse the response from the server and use javascript to update the page
I have a MySQL database with and id and a text string, I want to be able to display it, and with the click of a button display another random phrase without having to refresh the whole page.
I have look quite thoroughly and have no found no answer for this concrete question.
Is it possible to do it with PHP?
First try it WITH refresh.
You'll need to select a random text from your database (hint, use RAND() in your mysql request).
Once you know how to do that, learn how to make Javascript talk to your php page so you no longer need refresh. It's called AJAX, you can look at JQuery ( http://jquery.com/ ) for a library that will help you with it and specifically this page :
http://api.jquery.com/jQuery.ajax/
Your javascript will do a Ajax call to your php page, will get some data back and then will be able to display it in your page.
Look at the example, you should be able to do it from there.
But first do it with refresh, it's a first step.
If i were you i would use http://api.jquery.com/jQuery.get/
Create a page where you do the mysql query and then write a few lines of jquery to get the information from that specific page. You won't have to refresh the page and there are plenty of neat ways to change between the data you get from the database, with jquery
something like:
$.get("the_separate_page.php", function(data){
console.log('Your quote is : ' + data);
//check your log
});
im trying to make a simple page with search engine. i read, that if i want to implement autocomplete/autosuggest with form, i have to use ajax. thats ok for me. there are a lot solutions on the intenret, but unfortunetly all of them is the same script :/ and thats fine for me :) but i want to go further. i want to show autosuggest results in table for example below search form. the data is stored in a simple array (eventualy, source mysql) i know that kind of script isnt easy to write, so i ask you to give me a hint or something. trivial solution is use php, but this needs submit button.
help, im stuck :)
You have to follow steps given below
1] Apply onkeyup on the textfield and called ajax request
2] findings = select * from artists where name like "params[]%"
where, params[] is the content of the textfield
findings is ur variable which should pass to the view as response.
3] Called a partial (view) in which you create a table depending on the response and replace a div on each ajax request.