Obtain the identification number and full name from the typeahead feature

Question

Obtain the identification number and full name from the typeahead feature

I am able to retrieve the name and ID, but I am only able to display the name.

I have attempted using update and afterslected methods.

Currently, I have this code which works well, however, it only fetches the name!

 $('input.typeahead').typeahead({
    source:  function (query, process) {
    return $.ajax({
    url: "search/autocomplete",
    type: "GET",
    data: "query=" + query,
    success: function(data) {

      var data = $.merge( $.merge( [], data['2'] ), data['1'] );
      return process(data); 
    }
    });

   }         
 });

The expected outcome is to fetch both the name and the ID (the ID should be displayed in a separate div like #mydiv).

Thank you in advance!

javascript ajax typehead

Answer 1

Answer №1

To find the solution, you need to include the afterSelect function.

  $('input.typeahead').typeahead({
   source:  function (query, process) {
     return $.ajax({
     url: "search/autocomplete",
     type: "GET",
     data: "query=" + query,
     success: function(data) {

    var data = $.merge( $.merge( [], data['2'] ), data['1'] );

    return process(data); 

         // an array will be returned and can be checked with console
  }

});

},
 afterSelect: function(data){
    console.log(data.id);
}
 });

Answer 2

To find the solution, you need to include the afterSelect function.

  $('input.typeahead').typeahead({
   source:  function (query, process) {
     return $.ajax({
     url: "search/autocomplete",
     type: "GET",
     data: "query=" + query,
     success: function(data) {

    var data = $.merge( $.merge( [], data['2'] ), data['1'] );

    return process(data); 

         // an array will be returned and can be checked with console
  }

});

},
 afterSelect: function(data){
    console.log(data.id);
}
 });

Answer 3

Answer №2

If you want to implement a typeahead directive using Bloodhound, follow these steps:

app.directive('typeheadDirective', function() {
    return {
        restrict: 'A',
        scope: {
            themes: '=',
            output: '=',
        },
        link: function(scope, element, attrs) {
            var themes = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('theme_name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: scope.themes,
            })
            element.typeahead(null, {
                name: 'themes',
                displayKey: function(item) {
                    return item.theme_name
                },
                source: themes.ttAdapter()
            })
            element.bind('typeahead:select', function(ev, theme) {
                scope.output = {
                    'id': theme.id,
                    /*'theme_id': theme.id,*/
                    'theme_name': theme.theme_name
                }
                // element.value = ''
                scope.$apply();
            })
        }
    };
});

Answer 4

If you want to implement a typeahead directive using Bloodhound, follow these steps:

app.directive('typeheadDirective', function() {
    return {
        restrict: 'A',
        scope: {
            themes: '=',
            output: '=',
        },
        link: function(scope, element, attrs) {
            var themes = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('theme_name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: scope.themes,
            })
            element.typeahead(null, {
                name: 'themes',
                displayKey: function(item) {
                    return item.theme_name
                },
                source: themes.ttAdapter()
            })
            element.bind('typeahead:select', function(ev, theme) {
                scope.output = {
                    'id': theme.id,
                    /*'theme_id': theme.id,*/
                    'theme_name': theme.theme_name
                }
                // element.value = ''
                scope.$apply();
            })
        }
    };
});

Obtain the identification number and full name from the typeahead feature

Answer №1

Answer №2

Similar questions

How can I attach an event listener to an element that is added dynamically with jQuery?

Retrieving a channel using its unique ID and then sending a message directly into it

Accessing factory in controller using AngularJS

Express JS is experiencing difficulties with the functionality of the iframe

Tips on emphasizing all div elements and incorporating navigation to each of them

Tips for resolving an issue with an array and the find method?

Ensure that the page has completely loaded using WebdriverJS

The oddity of a lone quotation mark trying to break

Using Jquery to preserve the selected value in a radio button

Maximizing the potential of Ajax for html() calls within D3.js: a comprehensive guide

Generating an order prior to payment being made by the customer

Format the image to fit within a div container

Using Node.js to retrieve a p12 certificate from the certificate repository

Guide to handling multiple forms within a single template using Express

Is there a way to retrieve the Response object in Express from outside the Route

Ways to declare a function within the events onMouseOver and onMouseOut

Can someone help me figure out the best way to locate a material-ui slider within a react

Use jQuery to change the background color when clicked

Utilizing JavaScript or jQuery in MVC4 to showcase information for the primary record

Can a for loop be implemented within a mongoose schema method?