用户键入student name，通过ajax，我希望student的所有数据都按名称显示.用户可能不知道id，就像fa - User types student name and by ajax I want all the data of student to be shown by name. User may not know id, like facebook friend search

User types student name and by ajax I want all the data of student to be shown by name. User may not know id, like facebook friend search

如何通过在文本框中键入非唯一项来唯一标识记录。例如，使用自动完成，我键入学生姓名，它会提示任何三个姓名，现在我应该如何确保哪一个是正确的。我在数据库表中有学生id，但我想让它对用户更友好，所以我不想在前端使用id。

Drupal通过将id附加到值来解决这个问题，使其看起来像：James Kirk[10]然后通过提取最后一个[]对的内容来解析该值。但很明显，这不是你想做的。它很脏，对用户来说不好看。

我通过使用jquery自动完成控件解决了这个问题，该控件具有一个存储id的隐藏表单项和一个存储用户可读值的可见表单项。

完整控制html与jquery ui

<div class="form-item type-autocomplete_ajax name-employer">
    <label for="employer"> Employer          </label>
    <input type="autocomplete_ajax" name="employer-label" maxlength="60" size="30" value="EAS" class="ui-autocomplete-input" autocomplete="off">
    <input type="hidden" name="employer" value="14">
    <div class="description">Begin typing to see your options. You may add your own value if the desired value is not available</div>
    <script>
      $('.name-employer input[name="employer-label"]').autocomplete({source: function( request, response )
    {
      var form_id = "patient_info_form";
      var form_item = "employer";
      $.ajax({
        url: "/ajax/options?term=" + request.term,
        dataType:"json"
      })
        .done(function(list)
        {
          $(".ui-autocomplete-loading").removeClass("ui-autocomplete-loading");
          response(list);
        })
        .fail(function()
        {
          $(".ui-autocomplete-loading").removeClass("ui-autocomplete-loading");
          list = [{"label": "No results found", "value": 0, "id": 0}];
          response(list);
        })
    },select: function (event, ui)
    {
      if (ui.item.id != 0)
      {
        $('.name-employer input[name="employer-label"]').val(ui.item.label);
        $('.name-employer input[name="employer"]').val(ui.item.value);
      }
      return false;
    }, focus: function (event, ui) {
      if (event.keyCode == null)
      {
        return false;
      }
      $('.name-employer input[name="employer-label"]').val(ui.item.label);
      return false;
    }});$('.name-employer input[name="employer-label"]').focusout(function() {
      if ($(this).val() == "")
      {
        $('.name-employer input[name="employer"]').val("");
      }
    });    </script>
  </div>

注意两个输入。第一个是jquery ui构建的自动操作删除。xecond只是一个隐藏的输入，它存储用户不需要看到的"key"唯一id值。

然后在提交时忽略自动完成值，只检查隐藏值。