How to create multiple auto-complete in the input field based on the structure of the proposal?

Question

Suggestion structure of my autocomplete:

<Occupation> <for> <time period>

Example:

• Student for 5 years
• Teacher for 2 years

In the database, I have a column containing a list of professions. With jQuery UI autocomplete, I populate the first two sections of text input using the following codes:

 <script> $(function() { $("#occupation").autocomplete({ source: 'search.php', delay: 500, select: function(event, ui) { $(this).val(ui.item.value) } }); }); </script> <input type='text' name='occupation' id='occupation'> 

search.php Code:

 <?php $searchTerm = $_GET['term']; $query = $db->query("SELECT DISTINCT occupation FROM table WHERE occupation LIKE '%" . $searchTerm . "%' ORDER BY occupation ASC"); $a_json = array(); while ($row = $query->fetch_assoc()) { $data_row["value"] = $row['occupation'] . ' for'; $data_row["label"] = $row['occupation']; array_push($a_json, $data_row); } echo json_encode($a_json); 

Now, is there a way to create a second trigger to do autocomplete for the rest? As after selecting an activity, if the user enters 5 , it displays the following autocomplete options for the time period: 5 days/ 5 weeks/ 5 months/ 5 years . As the picture below:

Thanks in advance for your suggestions.

Answer 1

I would recommend the following example shown here: http://jqueryui.com/autocomplete/#multiple

Basically, we are going to selectively select tags to populate using " for" as your separator instead of "," .

 var occupations = [{ value: "Assistant for", label: "Assistant" }, { value: "Student for", label: "Student" }, { value: "Teacher for", label: "Teacher" }]; var oLength = [ "Days", "Weeks", "Months", "Years" ]; $(function() { function split(val) { return val.split(/\sfor/); } function extractLast(term) { return split(term).pop(); } $("#occupation").on("keydown", function(event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) { event.preventDefault(); } }).autocomplete({ minLength: 0, source: function(request, response) { var term = extractLast(request.term); var results = []; if (request.term.indexOf("for") > 0) { var regE = /^(.*)\sfor\s(\d)\s(.*)$/ if (regE.test(request.term)) { return false; } if (parseInt(term) > 0) { $.each(oLength, function(k, v) { results.push(term + " " + v); }); } } else { results = $.ui.autocomplete.filter( occupations, request.term); } response(results); }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split(this.value); terms[0] = terms[0] + " for"; // remove the current input terms.pop(); // add the selected item terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(""); return false; } }); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" id="occupation" /> 

Answer 2

You can analyze the request when you have a number (since we don’t have words with numbers yet), you can call autocomplete again.

Example:

 $number = preg_replace('/\D/', '', $query); // replaces every non number for empty string if (is_numeric($number)) { $output = ''; // return variations like you want foreach (array ('weeks', 'years') as $period) { $output .= $number . $period; } return $output; } 

Answer 3

You need to tokenize your input. Your structure requires four tokens: <Occupation> , <for> , <time length> and <time unit> . You need to check for the presence of the <for> token.

• When you start writing the <Occupation> token, your code will search and select back for classes. When you select one of them, you fill in the entry with the sentence " <Occupation> <for> ".
• If you click on it again, you should check if there is a second <for> token.
  • If it is, you will not focus on showing activities, but time periods are possible.
  • If you have a number in the third token, you will only need to show time units. If you don’t, show some combinations of patterns, such as “2 days”, “5 months”, “1 year”.

This can be done using Javascript.

Answer 4

If the list is not listed in millions of records, why not just move part of the database to the client using localStorage or indexedDB? which is likely to help the user.