This is a migrated thread and some comments may be shown as answers.

Sample api.html improved with less confusing field ID's

0 Answers 92 Views

AutoComplete

This is a migrated thread and some comments may be shown as answers.

bri norq asked on 12 Dec 2011, 08:10 PM

The api.html sample code was confusing because ID's of the fields were named generically ("set", "get", etc.).

Sample code, imo should have clearly named variables and components.
Developers should be able to copy the sample and just rename the components to fit their own application.
If a field is named "value" it slows reuse because the developer has to think about all the other instances of "value" in the HTML/Javascript.

Here's my refined version of api.html. It can use further refinements but it demonstrates the principle of appropriate object name scoping.

<!doctype html>
<html>
    <head>
        <title>API</title>
        <link href="../../shared/styles/examples.css" rel="stylesheet"/>
        <link href="../../shared/styles/examples-offline.css" rel="stylesheet"/>
        <link href="../../../styles/kendo.common.min.css" rel="stylesheet"/>
        <link href="../../../styles/kendo.default.min.css" rel="stylesheet"/>
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/kendo.core.min.js"></script>
        <script src="../../../js/kendo.popup.min.js"></script>
        <script src="../../../js/kendo.data.min.js"></script>
        <script src="../../../js/kendo.list.min.js"></script>
        <script src="../../../js/kendo.autocomplete.min.js"></script>

            <style >
                #movieSelectionFieldId {
                    margin-right: 50px;
                }

                #example .code-sample {
                    margin-top: 0;
                    width: 300px;
                }
            </style>

    </head>
    <body>
        <a href="../index.html">Back</a>
        <div class="description">API</div>
        <div id="example" class="k-content">

            <div class="code-sample output">
                <h4 class="code-title">Begin entering name of a movie title:</h4>
                <div class="prettyprint">
                    <input id="movieSelectionFieldId" />
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    var moviesAvailableArray = [
                        "12 Angry Men",
                        "Il buono, il brutto, il cattivo.",
                        "Inception",
                        "One Flew Over the Cuckoo's Nest",
                        "Pulp Fiction",
                        "Schindler's List",
                        "The Dark Knight",
                        "The Godfather",
                        "The Godfather: Part II",
                        "The Shawshank Redemption"
                    ];

                    $("#movieSelectionFieldId").kendoAutoComplete(moviesAvailableArray);

                    var moviePickedValueAutoComp = $("#movieSelectionFieldId").data("kendoAutoComplete"),
                        setValue = function(e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                moviePickedValueAutoComp.value($("#setMovieFieldValueInputId").val());
                        },
                        setSearch = function(e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                moviePickedValueAutoComp.search($("#searchHelperFieldId").val());
                        };

                    $("#setMovieFieldButtonId").click(setValue);
                    $("#setMovieFieldValueInputId").keypress(setValue);
                    $("#searchHelperButtonId").click(setSearch);
                    $("#searchHelperFieldId").keypress(setSearch);

                    $("#getMovieFieldValueButtonId").click(function() {
                        alert(moviePickedValueAutoComp.value());
                    });
                });
           </script>

           <div class="configuration">
                <span class="configHead">Configuration</span>
                <span class="configTitle">API Functions</span>
                <ul class="options">
                    <li>
                        <input id="setMovieFieldValueInputId" type="text" />
                        <button id="setMovieFieldButtonId" class="k-button">Set value</button>
                    </li>
                    <li>
                        <button id="getMovieFieldValueButtonId" class="k-button">Get value</button>
                    </li>
                    <li>
                        <input id="searchHelperFieldId" value="The" />
                        <button id="searchHelperButtonId" class="k-button">Find starting with</button>
                    </li>
                </ul>
           </div>

            <div class="code-sample">
                <h4 class="code-title">Initialization Data</h4>
                <pre class="prettyprint lang-js">
var moviesAvailableArray = [
    "12 Angry Men",
    "Il buono, il brutto, il cattivo.",
    "Inception",
    "One Flew Over the Cuckoo's Nest",
    "Pulp Fiction",
    "Schindler's List",
    "The Dark Knight",
    "The Godfather",
    "The Godfather: Part II",
    "The Shawshank Redemption"
];</pre>
            </div>

        </div>
    </body>
</html>

Sample api.html improved with less confusing field ID's

No answers yet. Maybe you can help?