数据库支持的输入字段的代理筛选器值


Proxied filter value for database-backed input field

背景

对于国家/地区字段,系统检测并默认为加拿大。对于城市字段,用户键入一个加拿大城市名称,填充Facebook样式。

国家列表和城市列表都是使用AJAX和JSON填充的,它们使用代理(通过PHP查询(来自远程数据库。

使用MaxMind的GeoIP PHP API,国家默认为用户的原产国。

当用户选择不同的国家/地区时,其两个字母的ISO代码必须作为参数传递给城市输入,以便驱动查询的查询可以搜索所选国家/地区的城市。

例如,IP地址在加拿大的用户可以选择美国。当这种情况发生时:

  1. 城市字段将被擦除
  2. 城市领域获得关注;然后
  3. 仅显示美国城市(根据用户类型(

问题

以下PHP代码段将城市列表的检索代理到远程服务器:

echo file_get_contents( 'http://server/city.dhtml?q=' . 
  urlencode( $_GET['q'] ) );

jQuery tokenInput函数似乎没有提供传递额外内容的机制。下面是相关的jQuery片段。

收购国家

以下代码获取国家/地区代码和国家/地区列表。它将用户的国家/地区设置为默认国家/地区。

  // Where in the world?
  $.getJSON( 'geoip.dhtml', function( data ) {
    country = data[0].id;
  });
  // Select from countries that have significant amounts of data.
  $.getJSON( 'country.dhtml', function( data ) {
    var h = '';
    var len = data.length;
    for( var i = 0; i < len; i++ ) {
      var s = '';
      // Make the person's own country the default selection.
      if( data[i].id == country ) {
        s = '" selected="selected"';
      }
      h += '<option value="' + data[i].id + s + '">' + data[i].name + '</option>';
    }
    $('#country').html(h);
  });

获取城市

以下代码下载城市列表。tokenInput函数会自动将q参数传递给city.dhtml的"本地版本"中的代码(PHP源代码片段如上图所示(。q参数是用户为城市键入的文本。

  $('#city').tokenInput( 'city.dhtml', {
    hintText: "Type a city name.",
    tokenLimit: 1,
    classes: {
      tokenList: "token-input-list-facebook",
      token: "token-input-token-facebook",
      tokenDelete: "token-input-delete-token-facebook",
      selectedToken: "token-input-selected-token-facebook",
      highlightedToken: "token-input-highlighted-token-facebook",
      dropdown: "token-input-dropdown-facebook",
      dropdownItem: "token-input-dropdown-item-facebook",
      dropdownItem2: "token-input-dropdown-item2-facebook",
      selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
      inputToken: "token-input-input-token-facebook"
    }
  });

city.dhtml必须按国家代码筛选城市。

问题

在不使用cookie的情况下,您将如何向city.dhtml提供国家代码?

想法

最新版本的令牌输入支持JSONP,这有用吗?

谢谢!

问题是一旦设置了输入,就无法更改tokenInput URL参数。虽然可能删除现有的tokenInput,并在每次选择新的国家时重新创建它,但解决方案是破解。

解决方案是为jQuery TokenInput使用一个补丁,该补丁允许根据函数调用的结果设置URL参数。

https://github.com/loopj/jquery-tokeninput/pull/77

应用补丁并使用以下代码动态更改查询:

  function cityURL() {
    return 'city.dhtml?c=' + $('#country').val();
  }
  $('#city').tokenInput( cityURL, { /* ... */ });

并禁用jquery.tokeninput.js(靠近650行(中的缓存:

    //var cached_results = cache.get(query);
    var cached_results = false;

简洁的问题,+1!是什么让你不去做:

$('#city').tokenInput('city.dhtml?c=' + $('#country').val(), { /* ... */ });

您可能需要将其包含在onChange事件中,但它应该可以工作。