put
<select class="form-control">
<option value="" selected></option>
<option><input type="text" class="form-control" placeholder="Procurar dentro do banco de dados" name="pesquisa" id="pesquisa"></option>
</select>How do I put a search box inside a select and make it invisible until I click on the select and it appears to be able to search the database and the results appear as options in select
First of all, I'm going to make it very clear that I do not know if I understand correctly what you want, but there it goes. The detailed explanation is a bit complicated but I can try to help. You will be able to resolve this with javascript / jQuery.
First, create the text field to start the search. In jQuery set up a function that performs the search you want for each letter you typed in the field. (In that you will use Ajax). In other words, when a letter is typed in the field, this javascript function will be executed. The function in question will send the current value of the field to a PHP script that will mount and execute the query in the database, returning the possible values.
When you get these values just list them just below the search field. For this you can print them as unordered list ( <ul> and <li> ). To make it look nice, work with CSS. If you want something a bit more worked up, instead of your jQuery function just returning the raw data, send that data to another function that mounts the structure of a select, and then print on the screen (but I find it unnecessary - and less interesting that the first option - that all work).
In addition to displaying the data as a list, you need to create a function to identify if any of these options is selected. When the user clicks one of them, you take that value and fill in the field.
To help with the kick-off, I'll leave some snippets that can guide you. In this case, we pretend to be looking for a name.
This is the field to fill out
<input type="text" id="field" name="fullName" placeholder="Full Name">
In some separate file, put:
$('#field').change(function(){
$.ajax({
url : './findName.php',
type : 'POST',
data: 'name=' + $('#field').val(),
dataType: 'json',
success: function(data){
if(data.success !== 1){
return false;
}
}
})
});
The code above will trigger the file findName.php, which will be responsible for taking the value received and executing the query in the database.
The url attribute shows the destination file.
The type attribute represents the method that you are going to use to send the data.
"Data" is the data to be sent.
"Success" indicates what will happen when the request succeeds.
The returned results should be printed in PHP even using something like echo json_encode($nomes);
To get the variable in the PHP file (findName.php) is easy. How we use the POST method to send the data:
$name = $_POST['name'];
Anyway, I think we can get started.