I currently have the following code that shows the query results to option tags. But I want to convert it to the input that shows the matching results when the user inputs some words just like google's search input (Combo box?). How can I make a input, and a script that finds a matching result from the following data($notebook) with the user's inputs? And what make things complicated is that I want to submit the value='.$n['Note']['member_id'] and not the value the user inputs if possible, since I'm a beginner there should be a better solution that I dont know. If possible some examples will be great since I wasn't able to find a good solution by googling. I am totally helpless and I really want to love to hear from you!
<form action="" method="get">
<select>
<?php
foreach($notebook as $n):?>
<?php
echo '<option name="my" value='.$n['Note']['member_id'].'>'.$n['Note']['member_name'].'</option>';
?>
<?php endforeach;?>
<?php unset($notebook); ?>
</select>
<input type="submit" value="search">
</form>
You need a auto-complete kind of thing. Check the below example:
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} ); <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" placeholder="type j">
</div></div>