javascript - Twitter Bootstrap typeahead: get contextcalling element with `this` - Stack Overflow

admin管理员组

文章数量:1181439

I am using the Typeahead component of Twitter Bootstrap 2.1.1, and jQuery 1.8.1

I am trying to access the text box element from within typeahead's updater function. Here is my current code, which works great:

$('#client-search').typeahead({
    source: function (query, process) {
        $.get(url, { query: query }, function (data) {
            labels = [];
            mapped = {};
            $.each(data, function(i,item) {
                mapped[item.label] = item.value;
                labels.push(item.label);
            });
            process(labels);
        });
    }
    ,updater: function (item) {
        $('#client-id').val(mapped[item]);
        return item;
    }
    ,items: 10
    ,minLength: 2
});

I have many typeahead search boxes on the same page. Each search box has an id #xxx-search and a corresponding hidden input with id #xxx-id. I'd like to re-use the same code for everything by doing something like this:

$('#client-search, #endClient-search, #other-search').typeahead({

    ...

    ,updater: function (item) {
        var target = $(this).attr('id').split('-')[0] + '-id';
        $('#'+target).val(mapped[item]);
        return item;
    }

    ...

I thought that this would refer to the text box element in use, but apparently not, because I get an undefined error in firebug:

$(this).attr("id") is undefined

When I use this instead of $(this), I get:

this.attr is not a function

Can anyone help make this work?

---

UPDATE: THE ANSWER, AND MORE!

Thanks to benedict_w's answer below, not only does this work perfectly now, but I have also made this much better in terms of re-usability.

Here is what my <input>s look like:

<input type="text" autocomplete="off"
    id="client-search"
    data-typeahead-url="/path/to/json"
    data-typeahead-target="client-id">
<input type="hidden" id="client-id" name="client-id">

Notice how the search box references the hidden id. Here's the new js:

$(':input[data-typeahead-url]').each(function(){
    var $this = $(this);
    $this.typeahead({
        source: function (query, process) {
            $.get($this.attr('data-typeahead-url'), { query: query }, function (data) {
                labels = [];
                mapped = {};
                $.each(data, function(i,item) {
                    mapped[item.label] = item.value;
                    labels.push(item.label);
                });
                process(labels);
            });
        }
        ,updater: function (item) {
            $('#'+$this.attr('data-typeahead-target')).val(mapped[item]);
            return item;
        }
        ,items: 10
        ,minLength: 2
    });
});

I am using the Typeahead component of Twitter Bootstrap 2.1.1, and jQuery 1.8.1

I am trying to access the text box element from within typeahead's updater function. Here is my current code, which works great:

$('#client-search').typeahead({
    source: function (query, process) {
        $.get(url, { query: query }, function (data) {
            labels = [];
            mapped = {};
            $.each(data, function(i,item) {
                mapped[item.label] = item.value;
                labels.push(item.label);
            });
            process(labels);
        });
    }
    ,updater: function (item) {
        $('#client-id').val(mapped[item]);
        return item;
    }
    ,items: 10
    ,minLength: 2
});

I have many typeahead search boxes on the same page. Each search box has an id #xxx-search and a corresponding hidden input with id #xxx-id. I'd like to re-use the same code for everything by doing something like this:

$('#client-search, #endClient-search, #other-search').typeahead({

    ...

    ,updater: function (item) {
        var target = $(this).attr('id').split('-')[0] + '-id';
        $('#'+target).val(mapped[item]);
        return item;
    }

    ...

I thought that this would refer to the text box element in use, but apparently not, because I get an undefined error in firebug:

$(this).attr("id") is undefined

When I use this instead of $(this), I get:

this.attr is not a function

Can anyone help make this work?

---

UPDATE: THE ANSWER, AND MORE!

Thanks to benedict_w's answer below, not only does this work perfectly now, but I have also made this much better in terms of re-usability.

Here is what my <input>s look like:

<input type="text" autocomplete="off"
    id="client-search"
    data-typeahead-url="/path/to/json"
    data-typeahead-target="client-id">
<input type="hidden" id="client-id" name="client-id">

Notice how the search box references the hidden id. Here's the new js:

$(':input[data-typeahead-url]').each(function(){
    var $this = $(this);
    $this.typeahead({
        source: function (query, process) {
            $.get($this.attr('data-typeahead-url'), { query: query }, function (data) {
                labels = [];
                mapped = {};
                $.each(data, function(i,item) {
                    mapped[item.label] = item.value;
                    labels.push(item.label);
                });
                process(labels);
            });
        }
        ,updater: function (item) {
            $('#'+$this.attr('data-typeahead-target')).val(mapped[item]);
            return item;
        }
        ,items: 10
        ,minLength: 2
    });
});

• javascript
• jquery
• twitter-bootstrap
• closures
• typeahead

Share Improve this question Follow edited Sep 13, 2012 at 20:20 Peter Di Cecco asked Sep 13, 2012 at 19:39 Peter Di CeccoPeter Di Cecco 1,57855 gold badges1515 silver badges2727 bronze badges 2

• I am getting a display of "undefined" options in the drop down when using this solution. – Xeoncross Commented Feb 17, 2014 at 21:20
• @Xeoncross: Both bootstrap and jQuery have been updated several times since this question was posted. It may no longer be relevant for the versions you are using. – Peter Di Cecco Commented Feb 18, 2014 at 21:56

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 24

You are inside another function so you need to save a reference to the element in the outer closure, this can then be passed into the event handler of the inner closure. You can do that using an $.each() call to loop through the selector saving a reference to the element (this) each time - e.g.

$('#client-search, #endClient-search, #other-search').each(function() {
    var $this = $(this);
    $this.typeahead({
        ...

        ,updater: function (item) {
            var target = $this.attr('id').split('-')[0] + '-id';
            $('#'+target).val(mapped[item]);
            return item;
        }
        ...
     });

The accepted answer is a good one, but just wanted to share an alternative that doesn't actually require the outer closure. I'm using bootstrap v2.3.1 and the input is available to you from this.$element.

Eg:

$(':input[data-typeahead-url]').typeahead({
    source: function (query, process) {
        $.get(this.$element.attr('data-typeahead-url'), { query: query }, function (data) {
            labels = [];
            mapped = {};
            $.each(data, function(i,item) {
                mapped[item.label] = item.value;
                labels.push(item.label);
            });
            process(labels);
        });
    }
    ,updater: function (item) {
        $('#'+this.$element.attr('data-typeahead-target')).val(mapped[item]);
        return item;
    }
    ,items: 10
    ,minLength: 2
});

本文标签： javascriptTwitter Bootstrap typeahead get contextcalling element with thisStack Overflow