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:

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

除此之外，我会在元素上使用数据属性，而不是像你拥有的自定义属性

请参阅Why should I prepend my custom attributes with "data-"?

另见jQuery Data vs Attr?

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

1 个答案:

除此之外，我会在元素上使用数据属性，而不是像你拥有的自定义属性