CODEWITHSUNDEEP
php
Sourajit Roy Chowdhury
Sourajit Roy Chowdhury

Reputation: 103

HTML Dropdown menu with autosuggestion and auto updation

I am trying to develop a webpage based on html, css. I am using PHP for server side scripting. I want a dropdown menu to be displayed with available options, But at the same time I need this drop down list to accept text. so I can choose from dropdown list as well from the text box whatever I want. I found one solution for the above scenario and working fine, but what extra I want that, once I write something in the text box, which is not an options of the dropdown, from the next time it will auto include it.

e.g. -> currently my dropdown is having say three options "Samsung", "Sony", "Apple"

<option value="one">Samsung</option>
<option value="two">Sony</option>
<option value="three">Apple</option>

Now, "Lenevo" is not available. For the First time in the text box I will write "Lenevo" as my choice, there after it will include it into the dropdown menu.

<option value="one">Samsung</option>
<option value="two">Sony</option>
<option value="three">Apple</option>
<option value="four">Lenevo</option>

. .

Like that it will happen.

Thanks for help.. :)

Upvotes: 0

Views: 258

Answers (2)

Ima
Ima

Reputation: 1109

Use select2 plugin https://github.com/select2/select2

<script type="text/javascript" src="/assets/profile/js/select2.min.fda43621.js"></script>

var validateTag = function (term, data) {
    var value = term.term;
    var re = /^[a-z\d\-_\s]+$/i;
    if (re.test(value))) {
        return {
            id: value,
            text: value
        };
    }
    return 'wrong_characters';
};
$("#selectAlt").select2({tags: true, maximumSelectionLength: 6, maximumInputLength: 20, createTag: validateTag});

HTML:

<select name="selectAlt[]" id="selectAlt" multiple="multiple" custom-placeholder="Genre">
<option    value="Blues">Blues</option>                                
<option    value="Classic Rock">Classic Rock</option>                                
<option    value="Country">Country</option>
</select>

Preview

Upvotes: 0

Mruf
Mruf

Reputation: 808

The best solution would be something like select2. (JavaScript)

For examples look here: Link

If you want to stay with PHP only, you need to offer a from to submit text values:

(Disclaimer: This solution is quite bad practice. But it's an example on how to solve it, on a low level.)

1) offer a form

<input type="text" name="addSelection">

2) Read post request

$newOption = $_POST["addSelection"];

3) Persist new option somewhere (here Session, also possible are databases)

$_SESSION["additionalOptions"][] = $newOption;

4) Merge with standard options

$options = ["apple","banana"];
$options = array_merge($options,$_SESSION["additionalOptions"]);

5) Create Options in HTML

<select name="fruits">
    <?php
        foreach($options as $option){
            echo '<option value="'+$option+'">'+$option+'</option>';

        }
    ?>
</select>

Upvotes: 1

Related Questions