Autocomplete

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/navbar.css file second from your npm repository. Make sure to load jquery.min.js and then the @corelogic/clui/dist/js/corelogic-ui.min.js file from your npm packages somewhere in your page.

Base search field

Start typing an address. After the second character it will autocomplete with address suggestions. To provide the results to the search field, use window.clui.autoCompleteInit(selector, options) and set a source upon initialization in the options object. For example, in this case you can say window.clui.autoCompleteInit('#searchbox', { source: YOUR SOURCE}) Please refer to the JQuery-UI API documentation for more details about what options can be used.

If you would like to only load the search component, make sure to load @corelogic/clui/dist/js/components/autocomplete.js.

<div class="form-group">
    <div class="input-group">
        <label class="sr-only" for="searchbox">Search for a Programming Language</label>
        <input class="form-control" placeholder="Search for a Programming Language" id="searchbox"/>
        <i class="fa fa-search left-icon"></i>
    </div>
</div>

<script>
$(function() {
        var availableTags = [
            "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
            "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
        ];
        window.clui.autoCompleteInit('#searchbox', {
            source: availableTags
        });
    } );
</script>

Address Autocomplete

If you would like to use the CoreLogic Address Typeahead service, you can do something like this:

<div class="form-group">
    <div class="input-group">
        <label class="sr-only" for="searchbox2">Search for an address...</label>
        <input class="form-control" placeholder="Search for an address..." id="searchbox2"/>
        <i class="fa fa-search left-icon"></i>
    </div>
</div>

<script>
$(function() {
  window.clui.autoCompleteInit('#searchbox2', {
    minLength: 2,
    source: function (request, response) {
      var settings = {
        async: true,
        url: "https://clp-typeahead-service-int.clgxlabs.net/autocomplete",
        crossDomain: true,
        data: {
          input: request.term
        },
        method: "GET"
      };

      $.ajax(settings).done(function(data) {
        response($.map(data.result_set, function (item) {
          return {
            label: item.address,
            value: item.address
          };
        }));
      });
    }
  });
});
</script>

Category search field

You can view a sample set of results in the search field by typing s. To provide the results to the search field, use window.clui.categoryCompleteInit(selector, options) and set a source upon initialization in the options object.

If you would like to only load the navbar with category search field component, make sure to load @corelogic/clui/dist/js/components/autocomplete.js.

The component expect certain object fields to exist. It requires a label, category, and a subcategory. Here's an example:

var data = [
        { label: "Pweroihvsyl", category: "Client", subcategory: '' },
        { label: "Syloop", category: "Group", subcategory: 'Wells Fargo' },
        { label: "Sylvia Lai", category: "User", subcategory: 'Wells Fargo > Development Production' },
        { label: "Sylvia Lai", category: "User", subcategory: 'Wells Fargo > Group B' },
        { label: "Sylvia Lee", category: "User", subcategory: 'Wells Fargo > Group B' },
      ];

For example, in this case you can say categoryCompleteInit('#searchbox2', { source: YOUR SOURCE}) Please refer to the JQuery-UI API documentation for more details about what options can be used.

We currently customize the open and close events and the classes parameter. If you need to override those, you need to make sure you keep our customizations or it will not work right. (See autocomplete.js)

<div class="form-group">
    <div class="input-group">
        <label class="sr-only" for="searchbox3">Search for an address...</label>
        <input class="form-control" placeholder="Search for an address..." id="searchbox3"/>
        <i class="fa fa-search left-icon"></i>
    </div>
</div>