jQWidgets Forums

Tagged: filter, Input, jqxinput, searchMode

This topic contains 8 replies, has 2 voices, and was last updated by Nadezhda 10 years, 1 month ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

jqxInput is not recognizing '(' with autocomplete Posts

January 23, 2015 at 8:44 am jqxInput is not recognizing '(' with autocomplete #65893

Participant

Hi,
We are developing basic formula builder with jqxInput. All is working fine except when we type in ‘(‘ to denote formula start, autocomplete is not recognizing the character and does not send in query parameter, even if the ‘(‘ is provided within the function
Following is the code we are using.

    <script type="text/javascript">

        var Selectedfunction;
        $(function () {
            var functionList =
                [
                  "IF",
                  "ELSE",
                 "GetValue()",
                 "Min()",
                 "Max()",
                 "Average()",
                 "Sum()",
                 "Mul()",

                ];

            $("#expressionWindow").jqxInput({
                opened: true,
                searchMode: 'containsignorecase',
                height: 100, width: 500,
                theme: 'energyblue',
                source: function (query, response) {
                    var item = query.split(/\s*[|+|\-|*|\/]\s*/g).pop();
                    $("#expressionWindow").jqxInput({ query: item });
                    response(functionList);
                },

                renderer: function (itemValue, inputValue) {

                    Selectedfunction = itemValue;
                    var stringContrinsOperators;
                    var value;
                    var regex = /.*[+|\-|*|\/]/g;

                    var textBoxString = regex.exec(inputValue);

                    if (textBoxString === null)
                        value = itemValue;
                    else
                        value = textBoxString + itemValue;
                    return value;
                }
            });

        });
           

    </script>
}

<div class="ui-widget">
    <label for="tags"></label>
    <input id="expressionWindow">

    <div id="displayStatus" style="font-size: 17px;"></div>
    <div id="helpStatus" style="font-size: 17px; color: blue;"></div>

</div>

Please help us on resolving this problem.

Your help is much appriciated.

January 26, 2015 at 12:08 pm jqxInput is not recognizing '(' with autocomplete #66004

Nadezhda

Participant

Hello AnkitShah,

You can use ‘filter’ callback function instead ‘searchMode’ property. The jqxInput widget tries to find the searched item using the entered text and the custom logic in ‘filter’. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link href="../../../jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var Selectedfunction;
                $(function () {
                    var functionList = [
                          "IF",
                          "ELSE",
                         "GetValue()",
                         "Min()",
                         "Max()",
                         "Average()",
                         "Sum()",
                         "Mul()"
                        ];

                    $("#expressionWindow").jqxInput({
                        opened: true,                       
                        height: 100,
                        width: 500,
                        theme: 'energyblue',
                        source: function (query, response) {
                            var item = query.split(/\s*[|+|\-|*|\/]\s*/g).pop();
                            $("#expressionWindow").jqxInput({ query: item });
                            response(functionList);
                        },
                        renderer: function (itemValue, inputValue) {
                            $.jqx.string.containsIgnoreCase(itemValue, inputValue);
                            Selectedfunction = itemValue;
                            var stringContrinsOperators;
                            var value;
                            var regex = /.*[+|\-|*|\(/]/g;

                            var textBoxString = regex.exec(inputValue);

                            if (textBoxString === null)
                                value = itemValue;
                            else
                                value = textBoxString + itemValue;
                            return value;
                        },
                        filter: function (item) {                          
                            var value = this.query;
                            var itemValue = item;
                            if (itemValue == null || value == null)
                                return false;
                            if (value.length == itemValue.length) {
                                return itemValue.toUpperCase().slice(0, value.length) == value.toUpperCase();
                            }
                            return itemValue.indexOf(value.toUpperCase()) != -1;                           
                        }                
                    });             
                });
            });
        </script>
        <div class="ui-widget">
            <label for="tags"></label>
            <input id="expressionWindow">
            <div id="displayStatus" style="font-size: 17px;"></div>
            <div id="helpStatus" style="font-size: 17px; color: blue;"></div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

January 27, 2015 at 10:51 am jqxInput is not recognizing '(' with autocomplete #66067

Ankit Shah

Participant

Hello Nadezhda,

Thank you for your suggestion, but it didn’t work for me. The solution you give is highlighting only one character in formula when auto-complete list appears and that is why we use searchMode property to “containsignorecase”. It also didn’t address the real problem I am facing.

It appears to me that the “(” and “&” are not being recognized by the jqxInput. I am saying so, because when I put alert on “query” parameter of source callback function, type something so that search show you some results and then presses ( or & the alert box does not contain these two chars. I am referring to below jsFiddle given as example for multiple value for jqxInput.

Can you see why it is not allowing the ( and & chars?

Thanks,
Ankit

January 27, 2015 at 10:52 am jqxInput is not recognizing '(' with autocomplete #66068

Ankit Shah

Participant

The Fiddle link is : http://jsfiddle.net/jqwidgets/rFCK6/

January 27, 2015 at 2:50 pm jqxInput is not recognizing '(' with autocomplete #66086

Nadezhda

Participant

Hi Ankit,

In body of ‘filter’ callback function you can define which characters should appear in formula when auto-complete list appears.
In the above example the source is different from your first source. Please, clarify the way you need to use “&” in input field. Maybe you want to use “&” insted the “,” with autocompleting multiple values into a single field?

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

January 28, 2015 at 10:40 am jqxInput is not recognizing '(' with autocomplete #66129

Ankit Shah

Participant

Hello Nadezhda,
What I want is to build a expression or formula using function signatures (for e.g. GetValue() + Max() + Min() ), and provide autocomplete feature for that. The function list is my source data from which I want to search. So, my function list contains items as “functionName()”. Now when I search the function list by typing in its name, say “GetValue”, jqxInput correctly shows me the option as “GetValue()”. Then I type “(” the jqxInput is not taking that character and does not highlight the “(“.
I put alert on “query” parameter of ‘source’ callback function, but alert didn’t show me the “(” char but “GetValue” is still displayed on alert. The same thing happened when i put alert on ‘this.query’ inside ‘filter’ callback.

So, the steps are:

1) Type “getvalue”, the jqxinput will highlight matching result.
2) Type “(” or “&”, jqxInput will not accept that character and does not highlight “(” or “&” in the list.

Note: If I press Esc key after step 1 to remove the matches and then type the “(” jqxInput will allow me that char, and also highlight that.

Below is the modified code. I slightly modified the filter callback to match every character, irrespective of its case.

<script type="text/javascript">
        $(document).ready(function () {
            var Selectedfunction;
            $(function () {
                var functionList = [
                      "IF",
                      "ELSE",
                     "GetValue()",
                     "GetValue&", //this is just for e.g.
                     "Min()",
                     "Max()",
                     "Average()",
                     "Sum()",
                     "Mul()"
                ];

                $("#expressionWindow").jqxInput({
                    opened: true,
                    height: 100,
                    width: 500,
                    theme: 'energyblue',
                   // searchMode: 'containsignorecase',
                    source: function (query, response) {
                       
                        var item = query.split(/\s*[+|\-|*|\/]\s*/g).pop();
                        $("#expressionWindow").jqxInput({ query: item });
                        response(functionList);
                    },
                    renderer: function (itemValue, inputValue) {
                        $.jqx.string.containsIgnoreCase(itemValue, inputValue);
                        Selectedfunction = itemValue;
                        var stringContrinsOperators;
                        var value;
                        var regex = /.*[+|\-|*|\/]/g;

                        var textBoxString = regex.exec(inputValue);

                        if (textBoxString === null)
                            value = itemValue;
                        else
                            value = textBoxString + itemValue;
                        return value;
                    },
                    filter: function (item) {
                       
                        var value = this.query;
                       // alert(this.query);
                        var itemValue = item;
                        if (itemValue == null || value == null)
                            return false;
                        if (value.length == itemValue.length) {
                            return itemValue.toUpperCase().slice(0, value.length) == value.toUpperCase();
                        }
                        return itemValue.toUpperCase().indexOf(value.toUpperCase()) != -1;
                    }
                });
            });
        });
    </script>

Thanks,

January 28, 2015 at 1:32 pm jqxInput is not recognizing '(' with autocomplete #66131

Nadezhda

Participant

Hi Ankit,

The ‘toUpperCase()’ method converts a string to uppercase letters but it is not recognize some characters(for example “(” and “&”). If you want to use such an functionality you should use custom code to achieve it or just take out the ‘toUpperCase()’ method.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

February 3, 2015 at 6:53 am jqxInput is not recognizing '(' with autocomplete #66380

Ankit Shah

Participant

Hello Nadezhda

I really didn’t understand your point here. If I execute following code on document ready, it correctly recognize “(” character and shows correct output.

$(document).ready(function () {

                alert("This is test for (".toUpperCase());
            });

What I am missing here?

I want to search with all words that user enters. This does not work when I compare “value” and “itemValue” without converting them to upper case (or may be lower case).

Thanks,

February 3, 2015 at 8:06 am jqxInput is not recognizing '(' with autocomplete #66393

Nadezhda

Participant

Hi Ankit,

Please, find the following topic which contains the solution for this issue: http://www.jqwidgets.com/community/topic/jqxinput-issues-with-limitations/.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.