Всем доброе время суток, на днях задался вопросом по поводу авто подтягивания информации из API или с чужой базы для Городов и Стран.
Нашел довольно интересный chosen-js для того что бы создать "живой поиск" https://harvesthq.github.io/chosen/ .Получилась вот такая форма(Работаю с Laravel 5.4):
<div class="form-group">
<label class="control-label" for="title">City:</label><br>
<select data-placeholder="Choose a city..." id="city" name="city" class="chosen-select-city">
<option value=" "> </option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
</select>
<div class="help-block with-errors"></div>
</div>
<script>
jQuery(".chosen-select-city").chosen({no_results_text: "Oops, no city!"});
</script>
Но не знаю как кинуть подключения к базе или API, не могу найти хотя бы пример. Поскольку прекрасно понимаю что база с 100000+ городов это будет весить просто не одну 100 мб да еще и обновлять надо, возможно есть какие подключения к google или там еще к чему?
И да сразу предупреждаю такой вариант как VK,Mail,Yandex и т.д. не предлагать так как проект будет работать на территории Украины
Можно написать простой скрипт с использованием jQuery. Можно будет добавить простой кеш в будущем, проверяя был ли подобный запрос ранее и доставать результат из кеша. Ниже простая реализация (конечно, нужно будет добавить разные проверки на длину поля и его содержимое например).
html:
<form action="/server.php">
<input type="text" name="s" class="js_input">
<select name="country" class="js_select">
<option>Не выбрано</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="ajax.js"></script>
js:
// сработает при вводе в input
$(document).on('keydown', '.js_input', function() {
// если кол-во введенных символов меньше 3 ничего не делать
if ($(this).val().length < 3) {
return;
}
return getOptions();
});
// получить список стран
var getOptions = function() {
var str = $('.js_input').val();
$.ajax({
url: "/server.php?s=" + str,
type: "GET",
success: function(res) {
var array = JSON.parse(res);
return renderOptions(array);
},
error: function(err) {
console.log(err);
}
});
};
// добавить options в select
var renderOptions = function(array) {
var options = '<option>Не выбрано</option>';
if (array.length) {
for (var i = 0; i < array.length; i++) {
options += '<option value="' + array[i] + '">' + array[i] + '</option>'
}
}
$('.js_select').empty().html(options);
};
php:
if(isset($_GET['s']) && !empty($_GET['s'])) {
// ваша БД/API
$countries = array(
'Russia',
'United Kingdom',
'Germany',
);
$query = [];
// Поиск в БД/API
foreach($countries as $country) {
preg_match_all("/(?<match>" . strtolower($_GET['s']) . ")" . "/", strtolower($country), $match, PREG_PATTERN_ORDER);
if(count($match['match'])) {
$query[] = $country;
}
}
echo json_encode($query);
die();
}
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Почему new Date возвращает одни и те же значения(одно и тоже время)? Нужно чтоб при добавление сообщения ему возвращалась соответствующие время(при...
Есть текстНа него надо наложить background так, чтобы он был только на тексте