Multiple autosuggestion in an input based on Category and criteria

256
December 10, 2016, at 3:43 PM

I need some inputs on the multiple autosuggestion while searching. The search string consists of Category, optional Criteria and value.

Example : Category.Criteria

I tried using jquery with the autocomplete, the first level for category of autosuggest works fine, once the user selects a Category and types in “.” We are supposed to show the Criteria’s configured for that Category.

The 2nd set of auto suggestion does not appear immediately when the user select a category and types a ".", but it appears once we focus out of the input area and come back.

Hers is the code https://jsfiddle.net/krishnanpb/gh32nad6/1/

Steps: 1. select a category and then type ".", move out of the input area and refocus the second set of suggestion appears.

 $(document).ready(function() {
        BindControls();
    });
    function BindControls() {
        var Categories = [
        "Customer",
        "Equipment",
        "Link",
        "Location",
        "Network",
        "Service",
        "Termination"];
        $('#tags').autocomplete({
            source: Categories,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
        $('#tags').bind('keypress', function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if(code == 46) { 
            console.log(". pressed");
            var Criteria = [
            "name",
            "id"];
            }
            $( "#tags" ).autocomplete({
                source: Criteria
            });
        });
    } 

html :

Tags:

Answer 1

You should use the KeyUp event. I also forced it to re-focus on the input after changing the source.

$( "#tags" ).keyup(function( event ) {
    if(event.which == 190) { 
        console.log(". pressed");
        var Criteria = ["name", "id"];
        $('#tags').autocomplete({ source: Criteria });
        $('#tags').focus();
    }
});
READ ALSO
Dynamically created fileinput does not bind to change event on IE

Dynamically created fileinput does not bind to change event on IE

I need to created fileinput elements dynamically

155
jQuery's load function doesn't work locally

jQuery's load function doesn't work locally

I have to load an HTML file in a existing div when the window's width is smaller than 600px

278
Css transition not applying in child elements

Css transition not applying in child elements

I'm currently facing the following problemI have a <section> element that has some <div> as children

254
jquery dynamic attribute name

jquery dynamic attribute name

i'm having a list of attribute name like this phonelist1, phonelist2, ect

240