#php #ajax #json #jquery-ui #autocomplete
#php #ajax #json #jquery-пользовательский интерфейс #автозаполнение
Вопрос:
Я, как новичок, борюсь с автозаполнением, которое не создает выпадающий список с параметрами выбора. Полный код состоит из двух этапов — пользователь выбирает страну с помощью переключателей, затем запускает автозаполнение для выбора штата / провинции. В Firefox, код страны и ввод состояния публикуются в php-скрипте, запрос выполняется корректно с использованием элементов скрипта country и state, создается ответ. Автозаполнение не создает выпадающий список с выбранными элементами. Firefox выдает сообщение об ошибке синтаксического анализа и неправильное сообщение JSON из my error: alert. Когда я помещаю элементы ответа в JSONLint, он говорит, что элемент является допустимым JSON. Firefox показывает правильное содержимое в массивах запросов, когда я меняю страну и изменяю ввод состояния. Я скопировал функцию success и опцию select, но я не уверен в них. Предупреждение в опции выбора не срабатывает. Была бы признательна за помощь в получении заполненного выпадающего списка. Вот код:
Автозаполнение jQuery:
$("#stateProvince").autocomplete
({
source: function( request, response )
{
$.ajax(
{
url: "getStateProvince.php",
data: {
term: request.term,
country: $('input[name=country]:checked').val(),
},
type: "POST",
dataType: "json",
error: function(x,y,z) {
alert(x 'n' y 'n' z);};
success: function( data )
{
response( $.map( data, function( item )
{
return{
label: item.label,
value: item.value
}
}));
}
});
},
minLength: 2,
select: function (event, ui) //is this select necessary? correct? return true or false?
{
alert('|' ui.item '|2nd');
$("#stateProvince").val(ui.item.value);
return;
}
});
выбранный php:
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC))
{
/* In each row, pull stateProvinceNameInEnglish and stateProvinceAbbreviation. */
$row_array['label'] = $row['stateProvinceNameInEnglish'];
$row_array['value'] = $row['stateProvinceAbbreviation'];
array_push($return_arr,$row_array);
}
}
/* Возвращает результаты состояния или провинции в виде массива, закодированного в json. */
echo json_encode($return_arr);
Комментарии:
1. Примером данных, возвращаемых из json_encode ($return_arr), является [{«label»: «Alabama»,»value»:»AL»},{«label»: «Alaska», «value»: «AK»}] Является ли это правильным и читаемым функцией success?
2. Исправлено! Проблема заключалась в том, что мой php возвращал тестовую информацию и некоторую информацию о заголовке. При удалении php возвращает только массив объектов JSON, а затем начинает работать выпадающее окно автозаполнения. Живи и учись.
Ответ №1:
Вы пробовали это так :
public function echoPhpArrayForAutocomplete(){
foreach($yourArray as $row){
$string .= '{';
$string .= '"label" : "'.$row['stateProvinceNameInEnglish'].'",';
$string .= '"value" : "'.$row['stateProvinceAbbreviation'].'",';
$string .= '"additionlInfo" : "'.$row['additionalInfo'].'"';
$string .= '},';
}
echo rtrim($string, ',');
}
Чем вы создаете массив, подобный этому, в
<script>
var arrayFromPhp = [ <?php echoPhpArrayForAutocomplete(); ?> ];
</script>
Затем вы вводите данные, чтобы отобразить выпадающий список при вводе ключа, и предоставляете ему нужный массив следующим образом:
$('#stateProvince').live('keyup.autocomplete',function(){
$input = $(this);
$input.autocomplete({
minLength: 0,
source: arrayFromPhp , // Array with object describing the keywords. Defined with php in the view file
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" item.label "</a>" )
.appendTo( ul )
.bind();
}
});
Вы даже можете поместить ‘additionInfo’ в .append( «» item.label «» ) следующим образом
.добавьте ( «тег» item.additionInfo «закрыть тег»), и это будет показано в выпадающем списке… Я не знаю, помогло ли это, но я на работе, и сейчас у меня больше всего времени, которое я мог бы уделить… Если это не помогло, я был бы рад помочь позже. С уважением.
Комментарии:
1. О … я только что увидел, что вы исправили проблему … nvm … 🙂
Ответ №2:
jQuery:
$("#stateProvince").autocomplete({
source: function( request, response )
{
$.ajax({
url: "getStateProvince.php",
data: {
term: request.term,
country: $('input[name=country]:checked').val(),
},
type: "POST",
dataType: "json",
error: function(x,y,z) {
alert(x 'n' y 'n' z);
},
success: function( data )
{
response(data);//<== Change Here
}
});
},
minLength: 2,
select: function (event, ui){
alert('|' ui.item '|2nd');
$("#stateProvince").val(ui.item.value);
return;
}
});
PHP:
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)){
$row_array['label'] = $row['stateProvinceNameInEnglish'];
$row_array['value'] = $row['stateProvinceAbbreviation'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);