Autocomplete with Sitecore SPEAK (Textboxes, Radio Buttons etc..)

Question

We have Sitecore SPEAK page which have set of textboxes, radio buttons and combo boxes. We need to automatically fill or autocomplete those fields when the user enter some value to a specific field (lastname).

Does anyone knows how we can do this with Sitecore SPEAK?

What we have tried already: We have a cshtml file which display the search records which placed inside the SPEAK page under a User lookup section.

When the user enter some value to lastname field, we retrieve data from the database and display it.

this.on("change:input", this.users, this); // defined in the initialize method

//User function to load records
users: function () {
var input = this.get("input");

$.ajax({
 url: "/api/sitecore/Order/FindUsers",
 type: "POST",
 data: { input: input },
 context: this,
 success: function (data) {
    this.set("output", data); 
 }
});
}

//CSHTML code        
@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Web.UI.Controls.Common.UserControls
@model RenderingModel
@{
    var rendering = Html.Sitecore().Controls().GetUserControl(Model.Rendering);
    rendering.Class = "sc-UserList";
    rendering.Requires.Script("client", "UserSearch1.js");

    rendering.GetString("input", "input");
    var htmlAttributes = rendering.HtmlAttributes;
}

<div @htmlAttributes >

    <p id="eventTitle"></p>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: output">
            <tr>
                <td><a data-bind="text: FirstName, click: function (data) { loadData('data-sc-id'); } "></td>
                <td data-bind="text: LastName"></td>
            </tr>
        </tbody>
    </table>

    <script>

        function loadData(attribute) {
            var matchingElements = [];
            var allElements = document.getElementsByTagName('*');
            for (var i = 0, n = allElements.length; i < n; i++) {
                if (allElements[i].getAttribute(attribute) !== null) {

                    if (allElements[i].accessKey == 'newitem1') {
                        allElements[i].innerHTML = "testtt";
                        allElements[i].innerText = "testtt";                        
                    }
                    matchingElements.push(allElements[i]);
                }
            }
            return matchingElements;
        }
    </script>
</div>

Once the user click on particular record in the User lookup section, we need to fill or autocomplete the rest of the fields in that page with the retrieved values but we were not able to do so.

Since we don't have a specific id to capture and set the value, we have set an accessKey and located the control we want but when we set the innerHTML or innerText it does not reflect.

So any one knows how we can do autocomplete with sitecore SPEAK?

Ian Graham Ian Graham · Accepted Answer · 2015-06-30T16:37:18

Quite a broad question, but looking at the docs and in the Business Component Library, AdvancedComboBox might be suitable.

https://doc.sitecore.net/speak/components/advancedcombobox

This has the ability to search for items as the user is typing in the combobox.

Autocomplete with Sitecore SPEAK (Textboxes, Radio Buttons etc..)

1 Answers