search box within a select with database search

Asked

Viewed 750 times

1

place

<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 to place a search box inside a select and make it invisible until I click the select and it appears so I can search the database and the results appear as options in the select

php javascript twitter-bootstrap

  • You can’t use one input within a select. You can display the input in the same place as select when clicking, using javascript, but you are asking a very complex question, you want to do this, still search in the bank, fill the select... better to ask a more specific question at a time

  • 2

    You’ll have to use Chosen or Select2. They will visually emulate a select with input inside.

1 answer

1


First of all, I’m gonna make it very clear that I’m not sure I understand what you want, but here goes. The detailed explanation is a little complicated, but I can try to help. You will be able to solve 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 typed in the field. (Here 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 run the query in the database, returning the possible values.

When picking up 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 visually pleasurable, work with CSS. If you want something a little more worked, instead of your jQuery function just returning the raw data, send this 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 than the first option - all this work).

In addition to showing the data as a list, you need to create a function to identify if any of these options are selected. When the user clicks on one of them, you take this value and fill in the field.

To help with the kickoff, I’m going to leave some snippets that can guide you. In this case, we simulate that we’re looking for a name.

This is the field to fill <input type="text" id="field" name="fullName" placeholder="Full Name">

In a 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 above code will trigger the findName.php file, which will be responsible for taking the received value and running the query in the database. The url attribute shows the target file. The type attribute represents the method you will use to send the data. "Date" is the data to be sent. "Success" indicates what will happen when the request happens successfully. 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 start.

Browser other questions tagged php javascript twitter-bootstrap

You are not signed in. Login or sign up in order to post.