jQWidgets Forums

Tagged: AutoComplete, css, image, jqxinput

This topic contains 1 reply, has 2 voices, and was last updated by ivailo 9 years, 8 months ago.

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

Author

jqxInput autocomplete image Posts

September 16, 2015 at 8:25 am jqxInput autocomplete image #75890

burgmeisterc

Participant

Hello,

is it possible to add an image before the displayMember ?

if (valueMember == x){
img1 + displayMemeber
}

September 16, 2015 at 11:19 am jqxInput autocomplete image #75910

ivailo

Participant

Hi burgmeisterc,

There is not such a built in feature.
Like a workaround you can check on select the value member and then to change the css of the input with added image.

Here is a sample based of the auto complete demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The jqxInput widget provides suggestions while you type into the field. The suggestions in this sample are cities. The datasource is the geonames.org webservice. The city name ends up in the input after selecting an element, more info is displayed in the suggestions popup to help find the right entry.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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 timer;

                $("#input").jqxInput({ placeHolder: "Enter a City", height: 25, width: 200, valueMember: 'countryName', displayMember: 'countryName',
                    source: function (query, response) {
                        var dataAdapter = new $.jqx.dataAdapter
                        (
                            {
                                datatype: "jsonp",
                                datafields:
                                [
                                    { name: 'countryName' }, { name: 'name' },
                                    { name: 'population', type: 'float' },
                                    { name: 'continentCode' },
                                    { name: 'adminName1' }
                                ],
                                url: "http://api.geonames.org/searchJSON",
                                data:
                                {
                                    featureClass: "P",
                                    style: "full",
                                    maxRows: 12,
                                    username: "jqwidgets"
                                }
                            },
                            {
                                autoBind: true,
                                formatData: function (data) {
                                    data.name_startsWith = query;
                                    return data;
                                },
                                loadComplete: function (data) {
                                    if (data.geonames.length > 0) {
                                        response($.map(data.geonames, function (item) {
                                            return {
                                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                                value: item.name
                                            }
                                        }));
                                    }
                                }
                            }
                        );
                    }
                });

                $('#input').on('select', function () {
                    value = $('#input').jqxInput('val').value;
                    if (value == "Ankara") {
                         $("input").css({
                            "background": "url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Information_icon_with_gradient_background.svg/48px-Information_icon_with_gradient_background.svg.png) no-repeat scroll 7px 7px",
                            "background-size": "15px 15px", "padding-left": "30px"
                        });
                    } else{
                        $("input").css({ "background": "url()", "padding-left": "0px" });
                    }

                });
            });
        </script>
       <input type="text" id="input"/>
    </div>
</body>
</html>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.