'How the create autocomplete input from dropdown list?
I created a WordPress PHP plugin for my website. I listed all the companies in a dropdown list.
But I want to change it.,
I want to create a text input field with autocomplete feature. It should complete itself with the companies in the dropdown list.
I searched for it but I beginner in PHP and I cannot find any solution.
<?php
function mytheme_enqueue_custom_scripts()
{
wp_enqueue_style('selectize-css', 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css');
wp_enqueue_script('jquery-js-341', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
wp_enqueue_script('selectize-js', 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_custom_scripts');
function wp_my_company_search()
{
$url = 'https://api.mycomp.com/widget/company';
$response = wp_remote_get($url);
try {
$companys = json_decode($response['body']);
} catch (Exception $ex) {
$companys = null;
}
?>
<div class="vc_column_container " style="margin-left:100px">
<div class="vc_row">
<div class="vc_col-sm-10">
<select class="form-input company-seletion sfiltreselect">
<option value="" style="font-family: 'Exo'">Companies</option>
<?php foreach ($companys as $company) { ?>
<option value="<?php echo $company->code; ?>"><?php echo $company->name; ?> (<?php echo $company->code; ?>)</option>
<?php } ?>
</select>
</div>
<div class="vc_col-sm-2 ">
<a href="#" class="button btn-category-search " style="border-radius:4px; background-color:#72B886"><i class="fas fa-search" style="font-size:20px; text-align:center; color:white"></i></a>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('select').selectize({
sortField: 'text'
});
});
var companySelect = document.getElementsByClassName("company-seletion")[0];
companySelect.selectedIndex = 0;
window.addEventListener('beforeunload', function () {
companySelect.selectedIndex = 0;
});
</script>
<?php
}
add_shortcode('my-Company-Search', 'wp_my_company_search');
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
