使用 JSon 在 MVC3 的自动完成文本框中传递 locationID 和位置名称答案

【问题标题】：Passing locationID along with location name in Autocomplete TextBox in MVC3 using JSon使用 JSon 在 MVC3 的自动完成文本框中传递 locationID 和位置名称
【发布时间】：2012-04-27 17:38:04
【问题描述】：

我有国家，州的主人...... 我为位置制作了自动完成文本框。此自动完成功能会返回这些主人的所有地点名称（所有国家名称和州名称）。 我传递给 jquery 的只是字符串形式的位置名称。我想将位置 ID 和位置名称都传递给 jquery，但只想在自动完成中显示位置名称。 由于此自动完成功能用于存储用户的首选位置。 我需要 ID 和相应的位置名称来将用户预置的位置信息存储在用户表中。

请建议我该怎么做...... 一个演示会更有用.....

【问题讨论】：

标签： json asp.net-mvc-3 jquery autocomplete

【解决方案1】：

我假设您正在使用 JqueryUI 进行自动完成。默认情况下，JqueryUI 的自动完成功能将与 json 对象一起工作——更具体地说，是一组具有以下属性的对象字面量：“标签”和“值”；

{ label:x, value:y }

自动完成将使用“标签”属性来计算自动完成匹配，当用户选择时，将使用“值”属性作为选定项。此外，如果省略“value”属性，则“label”将用于比较和选择。

需要注意的重要一点是，您不仅限于这些属性。例如，您可以添加其他属性，例如 ..say .."location_id"。

{ label: "Some State and Country", location_id: 2 }

使用自动完成事件“select”，您可以执行一些操作，即将选定的 location_id 存储到隐藏的输入以通过表单发布，甚至可以触发 ajax 调用。试试这个：

...
<form>
Locations: <input id="location" />

<input type="hidden" id="location_id" />
<input type="submit">
</form>
...

<script>
  var mylocations = [
      {
        label: "North Carolina, USA",
        id: 123
      },
      {
        label: "North Dakota, USA",
        id: 128
      },
      {
        label: "Nevada, USA",
        id: 125
      },
      {
        label: "New York, USA",
        id: 311
      },
      {
        label: "New Brunswick, Canada",
        id: 267
      },
      {
        label: "Nova Scotia, Canada",
        id: 235
      },
      {
        label: "Newfoundlandand , Canada",
        id: 223
      }];

  $("#location").autocomplete({
    source: mylocations,
    select: function( event, ui ) {
      // store your location id somewhere like a hidden input ..you
      // can then allow the user to post the form (and selected id) back. 
      $( "#location_id" ).val( ui.item.id );
      return false;
    }
  });
</script>

【讨论】：