Search code examples
javascriptjquerycomboboxjqxcombobox

Placeholder and on select in combobox


I have the following code which outputs me a combobox:

<html>
<head>
// Included JS library
</head>
<body>
<script>
$(document).ready(function () 
{                
    var moduleAutoSuggest = getModuleAutoSuggestOption();

    // Create a jqxComboBox
    $("#jqxWidget").jqxComboBox(
    { 
        source: moduleAutoSuggest,
         placeHolder            : "text ...",
        width: '250', 
        height: '25px',
        disabled : false,
        searchMode: 'containsignorecase',
        autoComplete: true
    });

    obj = '';
      $('#jqxWidget').on('select', function (event) 
      {
                var args = event.args;
                if (args != undefined) {
                    var item = event.args.item;
                    if (item != null) 
                    {
                        obj = item;
                        printSelectedValue(obj);
                    }
                }
    });
});

function getModuleAutoSuggestOption()
{
    var moduleAutoSuggestOption = 
        [
            {"id" : "ALL_ICONS", "label":"All Icons"},
            {"id" : "ALL_LOGOS", "label":"All Logos"},
            {"id" : "ARTICLE", "label":"Newest Article"},
            {"id" : "ARTICLE_SUMMARY", "label":"Headlines For 10 Newest Articles"}
    ];

    return moduleAutoSuggestOption;
}   
</script>

<div id='content'></div>
        <div id='jqxWidget'>
        </div>

</body>
</html>

It gives me a working combobox, the issue is, the placeHolder attribute is not working and If I click on the input text, the selected value doesnt get clearer

Any help will be appreaciated


Solution

  • Using your code, I created a working example that seems to be functioning identically to the jqwidgets example fiddle. Was there something about this functionality you were looking to change?

    $(function () 
    {                
        var moduleAutoSuggest = getModuleAutoSuggestOption();
    
        // Create a jqxComboBox
        $("#jqxWidget").jqxComboBox({ 
            source: moduleAutoSuggest,
            placeHolder: "text ...",
            width: '250', 
            height: '25px',
            disabled: false,
            searchMode: 'containsignorecase',
            autoComplete: true
        });
    
        obj = '';
        $('#jqxWidget').on('select', function (event){
          var args = event.args;
          if (args != undefined) {
            var item = event.args.item;
            if (item != null) 
            {
              obj = item;
              printSelectedValue(obj);
            }
          }
        });
    });
    
    function getModuleAutoSuggestOption()
    {
        return [
                {"id" : "ALL_ICONS", "label":"All Icons"},
                {"id" : "ALL_LOGOS", "label":"All Logos"},
                {"id" : "ARTICLE", "label":"Newest Article"},
                {"id" : "ARTICLE_SUMMARY", "label":"Headlines For 10 Newest Articles"}
        ];
    
    }   
    <link href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
    
    <div id='content'></div>
    <div id='jqxWidget'>
    </div>