Help with a simple lookup page
I am new to this type of coding after nearly 10 years of Autohotkey, and have tasked myself with an online Karaoke book lookup, that will work on a phone, I have the basics working fine, but have a question or two,
1. Can a csv file be searched, without being loaded into a table first, just display any search hits in a table? (the file i am searching is
book.txt) and my delimiter is ^
2. I am using a load Songlist button to force DB refresh whenever i load the page, Does this make sense?
Working Web Page Is there a better way?
3. The code i am using initiates a search every keypress, and after 10 hours of trial and error cannot get it to wait until i finish typing before doing the search.
Could somebody offer some help on these Two main problems? (1 and 3)
The Code i have pieced together so far from various examples:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Jump4joy's online Karaoke Book</title>
- <script src="js/jquery.min.js"></script>
- <link rel="stylesheet" href="css/bootstrap.min.css" />
- <script src="js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container" style="width:600px;">
- <div class="table-responsive">
- <h1 align="center">Jump4Joy Karaoke</h1>
- <br />
- <div align="center">
- <button type="button" name="load_data" id="load_data" class="btn btn-info" style="width: 300px; height: 60px; font-size:25px;">Click to Load Songlist</button>
- <hr>
- <input type="text" name="search" id="search" class="form-control"/>
- </div>
- <br />
- <div id="employee_table">
- </div>
- </div>
- </div>
- </body>
- </html>
- <script>
- $(document).ready(function(){
- $('#load_data').click(function(){
- $.ajax({
- url:"book.txt",
- dataType:"text",
- success:function(data)
- {
- var employee_data = data.split(/\r?\n|\r/);
- var table_data = '<table class="table table-bordered table-striped">';
- for(var count = 0; count<employee_data.length; count++)
- {
- var cell_data = employee_data[count].split("^");
- table_data += '<tr>';
- for(var cell_count=0; cell_count<cell_data.length; cell_count++)
- {
- if(count === 0)
- {
- table_data += '<th>'+cell_data[cell_count]+'</th>';
- }
- else
- {
- table_data += '<td>'+cell_data[cell_count]+'</td>';
- }
- }
- table_data += '</tr>';
- }
- table_data += '</table>';
- $('#employee_table').html(table_data);
- }
- });
- });
-
- });
- </script>
- <script>
- $(document).ready(function(){
- $('#search').keyup(function();
- var timeout = null;{
- search_table($(this).val());
- });
- function search_table(value){
- $('#employee_table tr').each(function(){
- var found = 'false';
- $(this).each(function(){
- if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
- {
- found = 'true';
- }
- });
- if(found == 'true')
- {
- $(this).show();
- }
- else
- {
- $(this).hide();
- }
- });
- }
- });
- </script>
-
The code is a little sloppily named eg. employee_table, but works (slowly on a phone)
My objectives are:
on loading web page, just start typing for a song or artist, waiting for my key-presses to end, then search the book and display in a table, the results.
Any Help would be greatly appreciated.