3

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

2
  • Что такое - "автоподтягивание"?
    – u_mulder
    25 июл 2017 в 21:13
  • имеется в виду что там будет select+input и когда будет писаться в input будет фильтроваться в select и подтягивать значения. Нашел пример добавил в вопрос.
    – JLomaka
    25 июл 2017 в 21:38

1 ответ 1

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();
}
4
  • Немного поменял сообщение так как часть задачи уже решил осталось только базу подтянуть вариант с "сам добавить в базу и кэш" не прокатит так как будет по 100 городов типа "Китай,Кетай,Кытай" и т.д. А потом чистить базу руками вообще будет тупо
    – JLomaka
    25 июл 2017 в 22:40
  • Кеш можно хранить в куках (есть плагин на jQuery, очень легкий) или даже в переменной: пришел ответ с сервера - добавили в массив, при следующем запросе сначала искать в этом массиве и если ничего нет искать в БД.
    – izmail
    25 июл 2017 в 22:43
  • Думаю этот пакет пригодится github.com/MenaraSolutions/geographer
    – izmail
    25 июл 2017 в 22:47
  • Интересная вещь которую вы скинули возьму на заметку, если разберусь и смогу соединить все в кучу то дополню свой вопрос-ответ и вам +
    – JLomaka
    25 июл 2017 в 23:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.