i am developing a web app app in which there are several results,
i need make a search box such that when i start typing into the search text field the results start filtering themselves on the basis of content of text box...
"Scenario"
I get list of registered user on a page
the list is nicely formatted and tabulated
there is a text box at the top of list
when i type something in it, the list gets repopulated with matching result just like "Windows Start Menu Search & Files"
i can not use grid-view as i am not developing in ASP, also that i am not going to use grid view as i need to be able to customize the formatting etc of the results as much as i can...
i cannot be anymore specific... please any Suggestions, where to look, or what to look for?
Try this jQuery plugin: http://datatables.net/
Any solution you choose will have to either operate on the complete table (no pagination), or use Ajax.
Seems that javascript (or your favourite framework) perfect suits your needs.
Your JS code should just filters matching rows, and since your table is html, its rows formatting is up to you.
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 list of contacts, pulled from a MySQL database and displayed using PHP/HTML/CSS etc.
I'm looking to create a filter so as the user types in a textbox it filters the contact list down to those that match the inputted text. Something like this http://kilianvalkhof.com/uploads/listfilter/
Now, that's fine for a shorter fixed list. What would be the best approach to do the same sort of thing, but for a contacts list of around the 10,000 mark, and results per page of 0, 50, or 100.
I could use jQuery DIV requery/reload on keyup - it would work, I just wanted to know if there is a more efficient way of doing it? The perfect working example is Apple iCloud website Contacts Page.
For this kind of functionality look into AngularJS.
So I have a database with 50 or so lenses and their attributes. I have a simple php script to let the user enter in min and max values from none/some/all of the attributes and then display a table with the corresponding lenses. What I'd like to be able to do is after the lenses are displayed is to have the legend clickable to sort the lenses and their attributes. I've done a bit of searching but can't find anything implemented easily.
Given the small number of results you want to re-sort, you can certainly do that in the web browser rather than making a round-trip back to the server.
If you can use jQuery, there are a number of grid controls that allow for sorting in the web browser, e.g.:
http://tablesorter.com/docs/
Search for jquery grid sortable to find many other options.
This jQuery plugin has built in AJAX functionality that could be useful in your case:
http://datatables.net/
I'm looking for a way to create a dynamic list below a text field on a web page.
This list needs to be selectable (by mouse click and arrow-down-key).
The selected item shall be in the text-field after selecting it.
It should look and behave like the google instant search.
I did finish the instant serach with this tutorial: http://www.w3schools.com/php/php_ajax_livesearch.asp
The only thing missing now is to make the list selectable and put the selected item in the text field. (after that the list shall disappear)
http://docs.jquery.com/UI/Autocomplete
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array.html
And there are many many more to choose from. good luck :-)
I am not sure the correct terminology for the process that I am trying to describe. I don't even know which platform is underlying the technique. If you understand my description, please give the link to the site(s) and or the keyword name of the process. I think it is done by AJAX, but I am not certain. I use php as the backend code, I just need to find a way to dynamically display the results. Please give suggestions. I forgot the name of the sites that use this, and my link history expired.
TIA
Description:
The page would have a search form and options. After the user submits, the search is initiated, and the results appear inside the dedicated result area. The page does not refresh, just the info inside the result area.
The display area will show 20 (or whatever) results (lines). There will be next, and previous buttons. If you hit next, the next set of results will display.
I am writing a code that generates 20 results for each display. There is no set number of results, so the results might have a start/first page, but do not have an end page.
Each time the user hits 'next', the program would generate/load new results. It would also store previous results, so that when a user hits 'prev', the previous results can instantly come up.
What techniques/program are theses?
Having recently handled pagination with Code Igniter (php framework), the following links might help you and anyone else out:
http://tympanus.net/jPaginate/
http://codeigniter.com/forums/viewthread/93045/
Usability is important and AJAX pagination introduces some important questions that need addressing regarding pagination, the following article will give some usability guidelines for displaying results in a table:
http://thedesignvanguard.com/crud-r-for-read
Code Igniter Prototype Framework Ajax Pagination:
http://codeigniter.com/wiki/AJAX_Pagination_with_CI_Pagination_Library/
Since we're using jQuery, we chose the following, Codeigniter jQuery framework for AJAX pagination
http://tohin.wordpress.com/2008/08/12/codeigniter-ajax-pagination/
http://tohin.wordpress.com/2008/10/07/codeigniter-ajax-pagination-exampleguideline/
It is not AJAX for sure.
Nobody uses AJAX for the pagination.
And there are about zillion pagination examples over internet
The only thing is never described in articles is how to persist search options for the other pages.
But it's simple enough: http_build_query() can help you
You need to have a GET/POST form submitted via AJAX which contains the fields in the search term and page number.
If you are going to set the page size to 20 results, page_num=4 will show results from 61-80 results.
Usually search results are GET instead of POST (Ex: See Google search results ) along with the page_number as another attribute and value.
#IVAN .. good to know that the library came helpful..
About that searching option; check the recent commit in github
http://github.com/neotohin/CodeIgniter-Ajax-pagination-Library there is an additional parameter added for searching.
I think the simple code in readme is enough for understanding the mechanism.
You could use datatables
https://datatables.net/
https://datatables.net/examples/data_sources/server_side.html
With this plugin using jquery also you could use server sided page request , you just have to handle the plugin post using Ajax.
post automatically sends row , page offset column, search criteria you just have to provide the json encode return
and the plugin automatically has library in featuring pagination, search sort number of rows per page and the table formatting.
Needed are jquery, and the plugin css and js for this to work
let me know if you understood my explanation.
thanks (=