jquery自动完成没有获取文本框属性

Question

其中 $(this).attr('action') 未定义我有多个文本框我如何获取属性并在自动完成中通过 url 传递它

javascript

 $( ".autocomplete" ).autocomplete({
    source: "<?php echo site_url('list')?>/"+$(this).attr('action'),
    minLength: 2,
    select: function( event, ui ) {
    log( ui.item ?
    "Selected: " + ui.item.value + " aka " + ui.item.id :
    "Nothing selected, input was " + this.value );
    }

HTML

<div class="row">
    <div class="form-group col-sm-5">
        <label>Clent Meeting Point</label>
        <input class="form-control autocomplete" action="client_meeting_point" id="ClientMeetingPoint" name="ClientMeetingPoint" value="<?php echo set_value('ClientMeetingPoint');?>" placeholder="east ave">
    </div>
    <div class="form-group col-sm-5">
        <label>Guide Meeting Point</label>
        <input class="form-control autocomplete" action="guide_meeting_point" id="GuideMeetingPoint" name="GuideMeetingPoint" value="<?php echo set_value('GuideMeetingPoint');?>" placeholder="etc...">
    </div>
    <div class="form-group col-sm-2">
        <label>Diparture Time</label>
        <input class="form-control timepicker " id="DepartureTime" name="DepartureTime" value="<?php echo set_value('GuideMeetingPoint');?>" placeholder="etc...">
    </div>
</div>

Answer 1

问题是在你使用$(this).attr('action') 的地方，$(this) 实际上并不指代小部件绑定到的元素。

要获取和使用对小部件绑定的元素的引用，请尝试以下操作：

  $(function () {
    $(".autocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: this.element.data('action'), // <-- this.element is the input the widget is bound to and is already a jQuery wrapped object
                dataType: 'json',
                data: {
                    term: request.term
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            log(ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value);
        }
    });
  });

Here is a demo showing how this would work.

注意您的服务器端脚本需要过滤可用值并返回匹配项（我的示例没有这样做）：

From the docs:

字符串：使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上，也可以在不同的主机上（必须提供 JSONP）。自动完成插件不会过滤结果，而是添加一个带有术语字段的查询字符串，服务器端脚本应该使用它来过滤结果。例如，如果源选项设置为“http://example.com”并且用户键入 foo，则会向http://example.com?term=foo 发出 GET 请求。数据本身可以采用与上述本地数据相同的格式。

---

除此之外，我会在元素上使用数据属性，而不是像您那样使用自定义属性

见Why should I prepend my custom attributes with "data-"?

另见jQuery Data vs Attr?