Autocomplete with multiple keywords

Question

I'm not sure if its possible but I would like to make it so that jquery-ui autocomplete works with multiple keywords for the same result.

Here is an example but its rather old and I couldn't seem to get it to work, even with the older jquery files. I'm not that familiar with jquery and javascript but I can manage to edit existing things.

This is what I currently have (without any adjustments for the multi-keyword):

    <script type="text/javascript">
    $(document).ready(function() {
        NewAuto();
    });

    function NewAuto() {
        var products = [
        <?php foreach($search__1 as $search) {
        echo "{value: '". $search['product_name'] ."'}, ";}?>
        ];
        $("#keyword").autocomplete({
            source: function(requestObj, responseFunc) {
                var matchArry = products.slice(); // Copy the array
                var srchTerms = $.trim(requestObj.term).split(/\s+/);
                // For each search term, remove non-matches.
                $.each(srchTerms, function(J, term) {
                    var regX = new RegExp(term, "i");
                    matchArry = $.map(matchArry, function(item) {
                        return regX.test(item) ? item : null;
                    });
                });
                // Return the match results.
                responseFunc(matchArry);
            },
            open: function(event, ui) {
                // This function provides no hooks to the results list, so we have to trust the selector, for now.
                var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
                var srchTerm = $.trim($("#keyword").val()).split(/\s+/).join('|');
                // Loop through the results list and highlight the terms.
                resultsList.each(function() {
                    var jThis = $(this);
                    var regX = new RegExp('(' + srchTerm + ')', "ig");
                    var oldTxt = jThis.text();
                    jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
                });
            }
        });
    }

</script>

What do you mean by 'multi-keyword'? Can you give some example terms? — asifrc, May 15 '13 at 11:36
I found that example on the internet, but cant make it to work in my code and the multi-keyword, if you look at the example you can see that when you type "win" and "day" you get "win the day" — Akano, May 15 '13 at 13:12
Your jsFiddle is working fine. I didnt got anu error. Post your full code and error u got. — Lakshmana Kumar, May 16 '13 at 08:29

Lakshmana Kumar · Accepted Answer · 2013-05-18T08:44:20.597

3

If i understand ur question correctly, u want to show list which match multiple word of same sentence.

Click here for example

 <html>
 <head>
    <title>Testing</title>
    <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .srchHilite { background: yellow; }
    </style>
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            NewAuto();
        });

        function NewAuto() {
            var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
            alert(availableTags);  // alert = win the day,win the heart of,win the heart of someone
            $("#tags").autocomplete({
                source: function(requestObj, responseFunc) {
                    var matchArry = availableTags.slice(); // Copy the array
                    var srchTerms = $.trim(requestObj.term).split(/\s+/);
                    // For each search term, remove non-matches.
                    $.each(srchTerms, function(J, term) {
                        var regX = new RegExp(term, "i");
                        matchArry = $.map(matchArry, function(item) {
                            return regX.test(item) ? item : null;
                        });
                    });
                    // Return the match results.
                    responseFunc(matchArry);
                },
                open: function(event, ui) {
                    // This function provides no hooks to the results list, so we have to trust the selector, for now.
                    var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
                    var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
                    // Loop through the results list and highlight the terms.
                    resultsList.each(function() {
                        var jThis = $(this);
                        var regX = new RegExp('(' + srchTerm + ')', "ig");
                        var oldTxt = jThis.text();
                        jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
                    });
                }
            });
        }

    </script>
</head>
<body>
    <div>
        <label for="tags">
            Multi-word search:
        </label>
        <input type="text" id="tags" />
    </div>
</body>
</html>

edited May 18 '13 at 08:44

answered May 15 '13 at 11:54

Lakshmana Kumar

1,199
3
16
34

Looks like this also shuts down the moment you type a second word, tried it bout in my code and the example, but no go =( – Akano May 15 '13 at 13:14
Can u explain exactly what u want? – Lakshmana Kumar May 15 '13 at 13:18
1

If you were to type "win" and "day" together normally you wouldn't get a result, but I want to still get the result "win the day" – Akano May 15 '13 at 13:21
K I got it now. I will answer as soon as possible. – Lakshmana Kumar May 15 '13 at 13:26
Ur example (http://jsfiddle.net/Q4jy9/1/) working fine to me. I didnt got any error. I have updated my answer(ur fiddle example). Check it out. Still u didnt get it worked post ur full code. so we can help u. – Lakshmana Kumar May 16 '13 at 08:15
Okay, this example works, but not with my own tags, I use php to read out a database and for some reason it doesn't accept that. The entire autocomplete just shuts down then.. i'll edit my post with the code now – Akano May 17 '13 at 20:58
Use `alert(products);` like my code. For `var availableTags = ["win the day", "win the heart of", "win the heart of someone"];` the alert should like this. `alert(availableTags); // alert = win the day,win the heart of,win the heart of someone` See how u getting alert for `alert(products);` But remember ur `products = []` it should be always in array even after when u fetch data from DB. – Lakshmana Kumar May 18 '13 at 08:46
Im posting another answer which im using. – Lakshmana Kumar May 18 '13 at 09:15
I think u r not creating proper array that support by autocomplete. so only it didnt worked. – Lakshmana Kumar May 18 '13 at 09:27
Thanks, the alert showed them as objects, i removed the value thing and the {} (i used it before for something, but not anymore) and now it works, thanks again, been working on it for weeks. – Akano May 21 '13 at 20:45
Great solution, this worked where many other solutions I found had failed. +1 for exposure! – NewbornCodeMonkey Dec 10 '14 at 20:38

score 0 · Answer 2 · answered May 18 '13 at 09:25

Im getting city area name form DB and displaying it using autocomplete.

    function GetLocalityList() {
        var LocalityArray = [];
        $.post("MvcLayer/Index/GetLocalityList",
        {
            CityID: $('#sltCity').val()
        },
        function(data) {
            // My sql query will be like this select LocalityID, CityID, LocalityName from tablename where CityID = 20
            // Here (data) is array format. Like this
            // [{"LocalityID":9397,"CityID":55,"LocalityName":"Adugodi"},{"LocalityID":9398,"CityID":55,"LocalityName":"Aga Abbas Ali Road"},{"LocalityID":9399,"CityID":55,"LocalityName":"Agaram"},{"LocalityID":9400,"CityID":55,"LocalityName":"Agrahara Dasara Halli"},{"LocalityID":9401,"CityID":55,"LocalityName":"Agrahara Dasarahalli"},{"LocalityID":9402,"CityID":55,"LocalityName":"Airport Exit Road"},{"LocalityID":9403,"CityID":55,"LocalityName":"Horamavu"},{"LocalityID":9404,"CityID":55,"LocalityName":"Hosakere Halli"},{"LocalityID":9405,"CityID":55,"LocalityName":"Hennur"},{"LocalityID":9406,"CityID":55,"LocalityName":"Hesaraghatta"},{"LocalityID":9407,"CityID":55,"LocalityName":"HKP Road"},{"LocalityID":9408,"CityID":55,"LocalityName":"HMT Layout"},{"LocalityID":9409,"CityID":55,"LocalityName":"Hongasandra"},{"LocalityID":9410,"CityID":55,"LocalityName":"Hoody"},{"LocalityID":9411,"CityID":55,"LocalityName":"Hayes Road"}    ]

            $.each(data, function(key, value) {
                LocalityArray[key] = value.LocalityName;
            });
            $("#txtLocality" + SelectedTab).autocomplete({
                minLength: 1,
                source: function(req, responseFn) {
                    //  \\b show each match letter in each word of list
                    //  ^ show each match letter in whole word of list
                    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(req.term), "i");
                    var a = $.grep(LocalityArray, function(item, index) {
                        return matcher.test(item);
                    });
                    responseFn(a);
                }
            });
        },
        'json'
        );
    }

Autocomplete with multiple keywords

2 Answers2

Linked