【发布时间】：2018-06-24 09:06:27
【问题描述】：
我在 PHP 页面中使用jQuery UI Autocomplete 进行定位服务。这个特别是使用远程 JSONP 数据源类型。我遇到的问题很奇怪，而且只会以一种方式发生。
这是正在发生的事情：
- 用户键入整个选择。值按预期分配和传递。
- 用户键入部分选择并使用键盘下拉到所需的选择，然后按回车键。值按预期分配和传递。
- 用户键入部分选择并单击想要的选择。只有在他们点击时输入的句段才会被传递。
换句话说，如果用户输入Location，那么Location 就会被传递。如果用户输入Loca 并使用键盘下拉到Location，则Location 被传递。但是，如果用户输入Loca并用鼠标点击Location，则Loca被传递。
这是插件内部的，所以我会尽力解释并显示相关代码。当我说它被传递时，它是在 PHP 变量 $thisVAR 中传递的。
我只是不明白为什么该值作为类型化段而不是分配的完整值传递。
这是创建字段时创建 js 的 PHP：
$js .= "$( function(){";
$js .= "$('.error').hide();";
$js .= "var rollbackValue = '';";
$js .= "$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').keyup(function(){";
$js .= "rollbackValue = $(this).val().slice(0,-1);";
$js .= "});";
$js .= "$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').autocomplete({";
$js .= "source: function( request, response ){";
$js .= "$.ajax({";
$js .= "url: '" . $thisURL . "',";
$js .= "dataType: 'jsonp',";
$js .= "data: {";
$js .= "term: request.term,";
$js .= "dependents: '". $thisVAR . "',";
$js .= "field: '". $config->settings['field_name'] . "_" . $suggestiveFieldArray . "',";
$js .= "fieldSettings: " . json_encode($fieldSettings);
$js .= "},";
$js .= "success: function( data ) {";
if( $fieldSettings['allow_other_countries'] == 'n' ){
$js .= "if (!data || !Object.keys(data).length){";
$js .= "$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').prev('.error')";
if( !empty($fieldSettings['custom_error']) ){
$js .= ".html('" . $customError . "')";
}else{
$js .= ".html('Sorry, there were no available records found starting with `<span style=\"text-transform: capitalize;\">' + request.term + '</span>`.')";
}
$js .= ".fadeIn('slow', function(){ $(this).delay(2500).fadeOut('slow'); });";
$js .= "$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').val(rollbackValue);";
$js .= "} else {";
$js .= " response( data );";
$js .= "}";
}else{
$js .= "response( data );";
}
$js .= "},";
$js .= "minLength: 0";
$js .= "});";
$js .= "}";
$js .= "});";
$js .= "});";
这相当于js中的以下内容（更容易阅读）：
$( function(){
$('.error').hide();
var rollbackValue = '';
$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').keyup(function(){
rollbackValue = $(this).val().slice(0,-1);
});
$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').autocomplete({
source: function( request, response ){
$.ajax({
url: '" . $thisURL . "',
dataType: 'jsonp',
data: {
term: request.term,
dependents: '". $thisVAR . "',
field: '". $config->settings['field_name'] . "_" . $suggestiveFieldArray . "',
fieldSettings: " . json_encode($fieldSettings);
},
success: function( data ) {
if ( !data || !Object.keys(data).length ){
$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').prev('.error')
.html('Sorry, there were no available records found starting with `<span style=\"text-transform: capitalize;\">' + request.term + '</span>`.')
.fadeIn('slow', function(){ $(this).delay(2500).fadeOut('slow'); });
$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').val(rollbackValue);
} else {
response( data );
}
},
minLength: 0
});
}
});
});
变量$thisVAR 被确定并设置在它的正上方：
/**
* Determine our variables for this field
*/
$thisVAR = ''; $abbr = '';
if( strpos($suggestiveFieldArray, 'city') !== false ) {
/**
* We need the state and country data
*/
$thisVAR = "$myState|$myCountry";
$abbr = ( $fieldSettings['abbreviations'] == 'y' ? "true" : "false" );
}elseif( strpos($suggestiveFieldArray, 'state') !== false ) {
/**
* We need the city and country data
*/
$thisVAR = "$myCity|$myCountry";
$abbr = ( $fieldSettings['abbreviations'] == 'y' ? "true" : "false" );
}elseif( strpos($suggestiveFieldArray, 'country') !== false ) {
/**
* We need the city and state data
*/
$thisVAR = "$myCity|$myState";
$abbr = ( $fieldSettings['abbreviations'] == 'y' ? "true" : "false" );
}
...而$myCity、$myState 和$myCountry 都只是作为值从字段值中提取出来的。
/**
* Associative Fields Values
*/
if($field['name'] == 'theField_city'){
$myCity = $field['value'];
}elseif($field['name'] == 'theField_state'){
$myState = $field['value'];
}elseif($field['name'] == 'theField_country'){
$myCountry = $field['value'];
}
【问题讨论】：
-
那是一大堆代码让我们费力地通过...... ;) 即便如此，它似乎并没有揭示为什么会发生这种情况。几乎就像您在某处有第二次点击事件......覆盖了 .autocomplete 内置的内容。
-
是的...对不起。我只是认为最好把它全部扔在那里，而不是询问“x”的分配位置等问题；）
-
@IncredibleHat 同意，但什么都没有。
-
我见过其他类似的问题，他们不得不使用
select事件来捕获鼠标点击事件。我也试过了，但结果没有变化。 -
它被其他东西所包含。使用
console.log(jQuery().jquery)虽然返回 2.1.3。
标签： php jquery jquery-ui autocomplete jquery-ui-autocomplete