So, I have a search bar and drop down menu:

```
<input placeholder="Name Search" name="sp_name" id="sp_name" class="btn-block"/>    
<input type="submit" id="sp_search_submit" class="btn" value="Search">

```

and 

```
<select name="sp_name" id="sp_name" class="input-small btn-block">                              
    <option value="" type="text"><?php _e('All Names', 'my_site') ?></option>
    <option value="Steve" <?php selected('Steve', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>>Steve</option>
    <option value="Mike" <?php selected('Mike', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>>Mike</option>
    <option value="Sean" <?php selected('Sean', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>>Sean</option>
</select>

```

Now, both the "Name Search" bar and dropdown menu have same id of `"sp_name"`.

In other words, you will get results either by inputting the name or selecting one of the options.

However these are two separate parts and it takes up spaces as shown below in the image.

I am trying to add the dropdown menu as a part of the input search bar as shown below.

![enter image description here](https://i.stack.imgur.com/d2v4D.png)

So, you can either choose to type the name or select from one of the choices from one single bar.

I tried to put the `<input>` as one of the `<select>` option, but it didn't work.

How can I achieve this?