Dropdown selection list for advanced search keywords

application/controllers/public/Public_ajax.php

@@ -15,6 +15,15 @@ function autocomplete_author()
 		$this->load->model('author_model');
 		echo json_encode($this->author_model->autocomplete($term, $search_field));
 	}
+
+	function autocomplete_keywords()
+	{
+		$term = $this->input->post('term');		
+		$this->load->model('keyword_model');
+		$data = json_encode($this->keyword_model->autocomplete($term));
+		echo $data;
+
+	}
 
 	function autocomplete_user()
 	{

application/models/Keyword_model.php

@@ -9,6 +9,40 @@ public function get_applied($list_keywords)
 
 
     }
+
+    	public function autocomplete($term)
+	{
+		// Escaping -- https://www.codeigniter.com/userguide3/database/queries.html#escaping-queries
+		$escaped_term = $this->db->escape_like_str($term);
+
+		// For extra safety, parameterise the query as well
+
+		$params = [];
+		array_push($params, $escaped_term . "%");
+		array_push($params, $escaped_term);
+		array_push($params, "%" . $escaped_term . "%");
+		array_push($params, $escaped_term . "%");
+
+		$sql = 'SELECT DISTINCT k.value, "A" AS priority
+		FROM keywords k
+		JOIN project_keywords pk
+		ON k.id = pk.keyword_id
+		WHERE k.value LIKE ?  
+		UNION 
+		SELECT "=== some other keywords containing \"?\" ===" AS value, "B" AS priority
+		UNION
+		SELECT DISTINCT k.value, "C" AS priority
+		FROM keywords k
+		JOIN project_keywords pk
+		ON k.id = pk.keyword_id
+		WHERE k.value LIKE ?  
+			AND k.value NOT LIKE ?  		
+		ORDER BY priority ASC, value ASC
+		LIMIT 200';
+
+		$query = $this->db->query($sql, $params);
+		return $query->result_array();
+	}
 
 	//return comma delimited list of keywords from project
 	public function create_keyword_list($project_id)

application/views/catalog/partials/advanced_search.php

@@ -1,5 +1,7 @@
 
 	<?php $display = ($advanced_search)? 'display:block;' : 'display:none;'; ?>
+
+	<link type="text/css" rel="stylesheet" href="https://librivox.org/css/ui-lightness/jquery-ui-1.8.24.custom.css?v=1670239344" />
 
 	<div class="advanced-search-inner" style="<?= $display ?>">
 
@@ -47,7 +49,7 @@
 			<div class="control-group">
 			     <div class="controls center">
 			     	<label for="keywords" ><span class="span2">Keywords:</span>
-					<input type="text" class="span4" id="keywords" name="keywords" value="<?= htmlspecialchars($advanced_search_form['keywords']) ?>"/>
+				<input type="text" name="keywords" value="" id="keywords" class="autocomplete" data-search_func="autocomplete_keywords" data-search_field="keywords" data-search_area="keywords" data-array_index="0"   />
 					</label>
 			     </div>
 			</div> 
@@ -111,4 +113,26 @@
 
 
 		</form>	
-	</div> <!-- end .advanced-search-inner	-->
+	</div> 
+
+	<script type="text/javascript">
+	function autocomplete_assign_vars(item) {
+		return item.value;
+	}
+
+	function autocomplete_assign_elements(search_area, ui, array_index) {
+		switch (search_area) {
+			case 'keywords':
+				document.getElementById("keywords").value = ui.item.label;
+				break;
+		}
+	}
+	</script>
+
+	<script type="text/javascript" src="https://librivox.org/js/libs/jquery-1.8.2.js?v=1710057521"></script>
+	<script type="text/javascript" src="https://librivox.org/js/libs/jquery.validate.js?v=1710057521"></script>
+	<script type="text/javascript" src="https://librivox.org/js/libs/jquery-ui-1.8.24.custom.min.js?v=1710057521"></script>
+	<script type="text/javascript" src="https://librivox.org/js/common/autocomplete.js?v=1710057521"></script>
+	<script type="text/javascript" src="https://librivox.org/js/common/jquery.tagsinput.min.js?v=1710057521"></script>
+
+	<!-- end .advanced-search-inner	-->

public_html/js/common/autocomplete.js

@@ -1,27 +1,46 @@
 set_autocomplete();
 
+/**
+ * Set up auto-complete boxes using jQuery Autocomplete.
+ *
+ * Input elements need to define the following attributes:
+ *
+ *   - data-search_func - The backend ajax function to call
+ *   - data-search_field - The name of the field
+ *   - data-search_area - Which area on the page is being auto-completed
+ *   - data-array_index - Used when you've got multiple inputs in one area (e.g. multiple authors)
+ *
+ * In the pages where this script is included, you'll also need to define two
+ * functions:
+ *
+ *   - autocomplete_assign_vars - Maps backend results to values to show in the drop-down
+ *   - autocomplete_assign_elements - Handles updating inputs when a value is selected
+ *
+ * See also: https://api.jqueryui.com/autocomplete/
+ */
+
 function set_autocomplete() {
 	var search_area;
-    var array_index;
+    	var array_index;
 
 	$( ".autocomplete" ).autocomplete({
         source: function(request, response) {
 
 			var element = this.element;
 			var search_func = element.attr('data-search_func');
 			var search_field = element.attr('data-search_field');
-            array_index = element.attr('data-array_index');
+            		array_index = element.attr('data-array_index');
 			search_area = element.attr('data-search_area');
 
             $.ajax({ url: CI_ROOT + 'public/public_ajax/' + search_func,
                 data: { 'term': element.val(), 'search_field': search_field},
                 dataType: "json",
                 type: "POST",
-				global: false, // prevent modal loader dialog
+		global: false, // prevent modal loader dialog
                 success: function (data) {
                     if (data != null) {
                         response($.map(data, function (item) {
-							return autocomplete_assign_vars(item);
+								return autocomplete_assign_vars(item);				
                         }))	
                     } else $(".ui-autocomplete").css({
                         "display": "none"
@@ -38,7 +57,9 @@ function set_autocomplete() {
             return false;
         }
 	});
-}	
+
+}
+
 
 	/*
 	.data('autocomplete')._renderItem() = function (ul, item) {