Как мне сделать правильный ajax запрос?

Question

[Петр Волханов]

Привет всем, есть задача вроде тривиальная, но не совсем. Есть три текстовых поля - город, страна и область. При вводе города работает авто-заполнение формы, города берутся из БД mysql. Как мне с помощью AJAX запроса узнать id города и заполнить страну и область?

Comments

[Anton Kuzmichev]

Автодополнение реализовано через select?
Форма позволяет ввести город, которого нет в БД?

[Петр Волханов]

@Assargin Авто-дополнение реализовано через jquery UI, это обычный input, не select. Форма позволяет ввести город, которого нет в БД.

Answer 1

[Anton Kuzmichev]

Можно при потере фокуса полем ввода города, отправлять введенное туда значение на сервер, там пробовать искать в БД город по значению, и если есть - возвращать область и страну.

Comments

[Anton Kuzmichev]

@eprivalov, я бы крепко подумал перед тем как делать так, как вы описали. Я конечно не знаю всех деталей и для чего вы это делаете, но городов "Александровка" в стране дай бог по одному в каждой области, какой будете возвращать?)

[Петр Волханов]

@Assargin А как же тогда быть? Ведь у меня будет поиск по странам СНГ...

[Петр Волханов]

@Assargin В принципе можно сделать Select для страны и области, чтобы человек смог скорректировать результаты, если выдаст несколько одинаковых городов из разных стран.

[Anton Kuzmichev]

@eprivalov, можете при вводе города показывать не только названия найденных городов, но и их область и страну, как это сделано в ВК: joxi.ru/Hk1CUxjKTJCQOAxc_Jw

[Anton Kuzmichev]

@Assargin, в конечном счете, вам же важен выбранный город, зачем давать возможность вообще выбирать область и страну? А если и давать - то как обычно в инете делают: сначала выбираешь страну, потом область, потом город.. Вы, как я понял, хотите уйти от этого способа? Посмотрите, в общем, как сделано в ВК, с точки зрения юзабилити - мне норм.

[Anton Kuzmichev]

@eprivalov, конечно же, коммент выше был вам))

Answer 2

[Петруша Укропов]

api.jqueryui.com/autocomplete/#method-_renderItem
Здесть есть пример: jqueryui.com/autocomplete/#custom-data

В двух словах: возвращаете с сервера не только название города, но и его id в формате json. Далее с помощью функции из первой ссылки формируете строку списка, например:

<li data-label="id этого города"><a>Название города</a></li>

Теперь при нажатии на элемент списка, узнаете id города и отсылаете запрос на сервер. В результате ожидаем json с названием и области и страны для выбранного города.

Можно упростить задачу и формировать строку сразу с названием области и страны.

<li data-label="id этого города" data-country="название страны для города" data-region="область города"><a>Название города</a></li>

И при нажатии на элемент списка, узнавать все data аттрибуты и подставлять в нужные поля. Плюсом является то, что нет необходимости слать второй запрос на сервер.