Datasette primitive search. See https://github.com/simonw/datasette/issues/498

primitive-datasette-search.html

{% extends "base.html" %}

{% block title %}{{ metadata.title or "Datasette" }}: {% for database in databases %}{{ database.name }}{% if not loop.last %}, {% endif %}{% endfor %}{% endblock %}

{% block body_class %}index{% endblock %}

{% block content %}
<h1>{{ metadata.title or "Datasette" }}</h1>

{% block description_source_license %}{% include "_description_source_license.html" %}{% endblock %}

<div id="search-all-wrapper">
	<form id="search-all-fts" onsubmit="return searchAllFTS()">
		<input id="search-all-fts-text" type="text" placeholder="Search a name">
	</form>
	<br>
	<div id="search-results-wrapper"></div>
</div>
<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
	var searchFTSForm = document.getElementById("search-all-fts");
	function searchAllFTS() {
		var searchText = document.getElementById("search-all-fts-text").value;
		if(searchText==='' || searchText===null || searchText.length<=0) return false;
		
		var resultsWrapper = $("#search-results-wrapper");
		resultsWrapper.html('');
		$.getJSON("-/databases.json",function(arrayOfDatabaseObjects){
			for (var i = arrayOfDatabaseObjects.length - 1; i >= 0; i--) {
				// Why `let`? Because: https://stackoverflow.com/questions/56916939/inner-getjson-wont-go-to-second-element-in-loop/56918128#56918128
				let dbName = arrayOfDatabaseObjects[i]["name"]; 
				var dbNameJSONPath = '/'+dbName+".json";

				$.getJSON(dbNameJSONPath,function(dbObj){
					var ftsEnabledtables = [];
					var arrayOfTableObjects = dbObj["tables"];
					
					for (var j = arrayOfTableObjects.length - 1; j >= 0; j--) {
						var tblObj = arrayOfTableObjects[j];
						var tblName = tblObj["name"];
						var tblIsFTSEnabled = tblName.endsWith("_fts");
						if (tblIsFTSEnabled) ftsEnabledtables.push(tblName.replace("_fts",''));
					}

					for (var j = ftsEnabledtables.length - 1; j >= 0; j--) {
						let table = ftsEnabledtables[j];
						let ftsSearchPath = '/'+dbName+'/'+table+".json?_search="+searchText;
						
						$.getJSON(ftsSearchPath, function(searchResultObj){
							var numberOfSearchResults = searchResultObj["filtered_table_rows_count"];
							var searchReturnedResults = numberOfSearchResults > 0;

							if (searchReturnedResults) {
								var searchResultsPath = ftsSearchPath.replace(".json",'');
								var searchResultText = numberOfSearchResults.toString()+" results found in <a href=\""+searchResultsPath+"\" target=\"_blank\">"+dbName+'/'+table+"</a>";
								var p = $("<p></p>");
								p.html(searchResultText);
								resultsWrapper.append(p);
							}
						});
					}			
				});
			}			
		});
		return false; // Stop form from submitting
	}
</script>

{% for database in databases %}
	<h2 style="padding-left: 10px; border-left: 10px solid #{{ database.color }}"><a href="{{ database.path }}">{{ database.name }}</a></h2>
	<p>
		{% if database.show_table_row_counts %}{{ "{:,}".format(database.table_rows_sum) }} rows in {% endif %}{{ database.tables_count }} table{% if database.tables_count != 1 %}s{% endif %}{% if database.tables_count and database.hidden_tables_count %}, {% endif -%}
		{% if database.hidden_tables_count -%}
			{% if database.show_table_row_counts %}{{ "{:,}".format(database.hidden_table_rows_sum) }} rows in {% endif %}{{ database.hidden_tables_count }} hidden table{% if database.hidden_tables_count != 1 %}s{% endif -%}
		{% endif -%}
		{% if database.views_count -%}
			{% if database.tables_count or database.hidden_tables_count %}, {% endif -%}
			{{ "{:,}".format(database.views_count) }} view{% if database.views_count != 1 %}s{% endif %}
		{% endif %}
	</p>
	<p>{% for table in database.tables_and_views_truncated %}<a href="{{ database.path }}/{{ table.name|quote_plus }}"{% if table.count %} title="{{ table.count }} rows"{% endif %}>{{ table.name }}</a>{% if not loop.last %}, {% endif %}{% endfor %}{% if database.tables_and_views_more %}, <a href="{{ database.path }}">...</a>{% endif %}</p>
{% endfor %}

{% endblock %}