Список стран и городов API

385
26 июля 2017, 22:21

Всем доброе время суток, на днях задался вопросом по поводу авто подтягивания информации из 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="&nbsp;">&nbsp;</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 и т.д. не предлагать так как проект будет работать на территории Украины

Answer 1

Можно написать простой скрипт с использованием 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();
}
READ ALSO
new Date() не обновляет значения

new Date() не обновляет значения

Почему new Date возвращает одни и те же значения(одно и тоже время)? Нужно чтоб при добавление сообщения ему возвращалась соответствующие время(при...

168
Наложение background только на текст

Наложение background только на текст

Есть текстНа него надо наложить background так, чтобы он был только на тексте

219
Что происходит в данной строке?

Что происходит в данной строке?

Допустим, есть строка:

170