自动完成不使用当前的 jquery 值答案

【问题标题】：Autocomplete not using current jquery value自动完成不使用当前的 jquery 值
【发布时间】：2016-10-28 13:49:15
【问题描述】：

我正在修改 jQuery 自动完成功能，以便将第二个术语传递给搜索功能以缩小搜索范围。我遇到的问题是能够将城市连接到 URL

$(function() {

    var city = $('#city').val();    //get the city value from text field
    var source = 'search.php?city=';  //URL where the search takes place
    //autocomplete
    $(".auto").autocomplete({
    source: source+city ,        //concatenation not working.
    minLength: 1
  });               

});

我尝试了不同的方法将城市名称连接到 url 上

$(function() {

    //var city = //$('#city').val();
    var source = 'search.php?city=';
    //autocomplete
    $(".auto").autocomplete({
    source: source+$('#city').val(),
    minLength: 1
  });               

});

我知道

var city = 'Austin'

有效。我不确定

$('#city').val()

因为如果我可以对其进行硬编码，那么对于从文本字段中获取变量的函数来说，它应该同样有效。对吧？

文本字段是这样的

<form action='' method='post'>
    <p><label>Pharmacy Names : </label><input type='text' name='names' value='' class='auto'></p>
    <p><label>City : </label><input type='text' name='city' id='city' value='' placeholder='Enter City First'></p>
</form>

即使Add form value to end of url - Jquery这个帖子也同意我的想法

这篇帖子Get the value in an input text box 表明我正在使用正确的 jquery 调用来获取文本框值。看起来它应该可以工作，但事实并非如此。

【问题讨论】：

我认为您的代码中的问题是您在还没有城市时设置了 url。然后 autocomplete 没有在进一步的 ajax 请求中再次检查它。
我从第一个警报中就知道了。它是空的，因为函数在加载时运行，文本字段为空。因此在执行自动搜索期间它保持为空。所以，城市的值需要在输入文字后设置。
您只是检查city 的值并将其传递给 DOM Ready 时的autocomplete。那时，该值为空。您需要使用一个函数作为您的source 选项，并且该函数需要获取并使用city 的值并使用它来获取数据。
我正在考虑使用 onblur 作为函数来设置城市变量。
stackoverflow.com/questions/21385892/…

标签： javascript jquery

【解决方案1】：

您的脚本的行为是真正正确的。发生这种情况是因为当您的脚本初始化时，city 输入为空。

您应该附加一个事件处理程序到您的city 输入，并且每当用户在其上输入内容时，更改自动完成的source：

$(function() {

    // initialize the autocomplete
    var source = 'search.php?city=';

    $(".auto").autocomplete({
        source: source,
        minLength: 1
    });               

    // event handler for yout input
    $('#city').on('input', function (e) {
        var city = this.value;

        // set the new source to your autocomplete
        // based on jQuery UI Autocomplete
        // http://api.jqueryui.com/autocomplete/#method-option
        $('.auto').autocomplete( "option", "source", source+city);
    });

});

【讨论】：

【解决方案2】：

这就是我能够使用两个文本框将两个变量传递给 sql 查询的原因。

$(function() {
//Pharmacy autocomplete
$("#pharm").click(function() {
var city = $("#city").val();

var str = "../../library/ajax/pharmacy_autocomplete/search.php?city="+city;
    //autocomplete
    $(".pharmacy").autocomplete({
        source: str,
        minLength: 1
    }); 
  });
});

#pharm 文本框是填写城市文本框后点击的地方。我在这个函数中引入了自动完成，我不必将城市值传递给自动完成。现在我可以将城市值连接到 URL 并将我的第二个值添加到 search.php。

【讨论】：