Merge pull request #55 from cgm78/master

AutoComplete Demoing Guide

Step 1: Download zip file.

Step 2: Extract zip file.

Step 3: Run index.html in browser (open inspection in google chrome, keep refershing page till 404 error is not recieved).

/**

 * Minified by jsDelivr using clean-css v4.2.1.

 * Original file: /npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.css

 * 

 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files

 */

#autoComplete_wrapper{position:relative;display:inline-block}

#autoComplete{position:relative;padding:0 2rem 0 3.5rem;height:2.1rem;width:6rem;font-size:1.2rem;outline:0;border-radius:50rem;border:.05rem solid #ff7a7a;caret-color:#ff7a7a;color:rgba(255,255,255,0);background-repeat:no-repeat;background-size:1.2rem;background-origin:border-box;background-position:center;transition:all .4s ease;-webkit-transition:all -webkit-transform .4s ease;text-overflow:ellipsis}

#autoComplete::placeholder{color:rgba(255,122,122,0);transition:all .3s ease}

#autoComplete:hover::placeholder{color:rgba(255,122,122,.3);transition:all .3s ease;-webkit-transition:all -webkit-transform .3s ease}

#autoComplete:focus::placeholder{padding:.1rem .6rem;font-size:1rem;color:rgba(255,122,122,.3);transition:all .3s ease;-webkit-transition:all -webkit-transform .3s ease}

#autoComplete::selection{color:transparent}

#autoComplete:focus::selection{color:#fff;background-color:rgba(255,122,122,1)}

#autoComplete:hover{padding:0 2rem 0 3.5rem;color:rgba(255,122,122,1);height:3rem;width:16.5rem;background-size:1.7rem;background-position:left 1.05rem top .7rem;transition:all .3s ease;-webkit-transition:all -webkit-transform .3s ease}

#autoComplete:focus{padding:0 2rem 0 3.5rem;color:rgba(255,122,122,1);height:3rem;width:16.5rem;border:.05rem solid #ff7a7a;background-size:1.5rem;background-position:left 1.05rem top .8rem;box-shadow:rgba(255,122,122,.1) 0 0 20px 5px}

#autoComplete_list{position:fixed;padding:0;left:0;right:0;margin-top:0;margin-left:auto;margin-right:auto;width:18rem;transition:all .1s ease-in-out;-webkit-transition:all -webkit-transform .1s ease}

.autoComplete_result{/*margin:0rem auto;*/padding:.6rem;max-width:280px;border:.05rem solid #e3e3e3;list-style:none;text-align:left;font-size:1.1rem;color:#7b7b7b;transition:all .1s ease-in-out;background-color:#fff}

.autoComplete_result::selection{color:rgba(#fff,0);background-color:rgba(#fff,0)}.autoComplete_result:last-child{border-radius:0 0 1rem 1rem}.autoComplete_result:hover{cursor:pointer;background-color:rgba(255,248,248,.9);border-left:2px solid rgba(255,122,122,1);border-right:2px solid rgba(255,122,122,1);border-top:2px solid transparent;border-bottom:2px solid transparent}

.autoComplete_result:focus{outline:0;background-color:rgba(255,248,248,.9);border-left:2px solid rgba(255,122,122,1);border-right:2px solid rgba(255,122,122,1);border-top:2px solid transparent;border-bottom:2px solid transparent}

.autoComplete_highlighted{opacity:1;color:rgba(255,122,122,1);font-weight:700}

.autoComplete_highlighted::selection{color:rgba(#fff,0);background-color:rgba(#fff,0)}.autoComplete_selected{cursor:pointer;background-color:rgba(255,248,248,.9);border-left:2px solid rgba(255,122,122,1);border-right:2px solid rgba(255,122,122,1);border-top:2px solid transparent;border-bottom:2px solid transparent}@media only screen and (max-width:600px){#autoComplete{width:5rem}

#autoComplete:focus{width:11rem;background-size:1.6rem;background-position:left 1.1rem top .75rem}.autoComplete_result:first-child{border-radius:1rem 1rem 0 0}.autoComplete_result:last-child{border-radius:0 0 1rem 1rem}.autoComplete_result:only-child{border-radius:1rem}}@media screen and (-webkit-min-device-pixel-ratio:0){#autoComplete{border-width:1px}

#autoComplete:hover{border-width:1px}

#autoComplete:focus{border-width:1px}}@-moz-document url-prefix(){#autoComplete{border-width:1px;background-size:1.2rem;background-origin:border-box;background-position:center}

#autoComplete:hover{border-width:1px}#autoComplete:focus{border-width:1px;background-position:left 1.1rem top .8rem}}

/*# sourceMappingURL=/sm/2bb3dcf548ec37c7de5c930474e8db20da4091fb846c9dd2fcdf9eac37ea959e.map */

 No newline at end of file

// Logs query events into the console.

document.querySelector("#autoComplete").addEventListener("autoComplete", function(event) {

    console.log(event.detail);

  });

//Declares a new autocomplete that is ran when the user enters more data into the autocomplete box.

var newAutocomplete = new autoComplete({

    //Defines the data that will be returned inside of the autocomplete.

    data: { 

      //Gets data source for autocomplete asyncronusly.

      src: async () => {

        // API key token

        const token = "this_is_the_API_token_number";

        //Const of value entered for query.

        const query = document.querySelector("#autoComplete").value;

        //Returns Json array of values that contain the query inside of them.

        return nameArray;

      },

      //Searches the returned data based off of the name property.

      key: ["name"],

      //Does not cache search.

      cache: false

    },

    //Returns the query (OPTIONAL, kept in for now to make sure nothing breaks when it is removed.).

    query: {   

          //Can be used to change the query by looking for certain values                            

          manipulate: (query) => {

            //Returns the query

            return query;

          }

    },

    //Triggers an event which displays the current status of the query in the console log.

    trigger: {

      //Trigger runs when searchbox is selected, clicked out of, or has been typed in.

        event: ["input", "focusin", "focusout"]

      },

    //Sorts values in descending order.

    sort: (a, b) => {                    

        if (a.match < b.match) return -1;

        if (a.match > b.match) return 1;

        return 0;

    },

    //Value displayed in searchbox before any value is entered.

    placeHolder: "Nomenclature", 

    //ID of input/searchbox which will be used.    

    selector: "#autoComplete",       

    //Does not display autocomplete results list until the characters entered into the searchbox exceed the threshold.   

    threshold: 1,       

    //Displays search with strict (starts with) results and not loose (contains) results.                                     

    searchEngine: "strict",  

    //Defines attributes for the results list.            

    resultsList: {

        //Renders/displays the results list.

        render: true,   

        //Edits containter id of the results list to be #autoComplete_list.                  

        container: source => {

            //Sets id to #autoComplete_list.

            source.setAttribute("id", "#autoComplete_list");

        },

        //Selects the input which the results list will be using.

        destination: document.querySelector("#autoComplete"),

        //Sets location of results list relative to the destination (above), can be afterend, afterbegin, beforebegin, and beforeend.

        position: "afterend",

        //Sets element type of the results list (ul, div, span, etc...).

        element: "ul",

    },

    //Sets the max number of results that can be returned in a results list for a query (10).

    maxResults: 10,    

    //Highlights query string characters inside of the results list.                     

    highlight: true,     

    //Edits each item on the list.                  

    resultItem: {                          

        content: (data, source) => {

            //Displays list items only when they match the query.

            source.innerHTML = data.match;

        },

        //Displays result items as list items.

        element: "li"

    },

    /*noResults: () => {                     // Action script on noResults      | (Optional)

        const result = document.createElement("li");

        result.setAttribute("class", "no_result");

        result.setAttribute("tabindex", "1");

        result.innerHTML = "No Results";

        document.querySelector("#autoComplete_list").appendChild(result);

    },*/

    //Runs a script on the selection of a result item, will be used to edit the url for search queries.

    onSelection: feedback => {             // Action script onSelection event | (Optional)

       //Cretes string used for searching with the selected name.

        var URLString = ("https://planetarynames.wr.usgs.gov/SearchResults?feature=" + feedback.selection.value.name);

        //Replaces spaces with %20 for encoded URL string.

        var encodedURLString = URLString.replace(" ", "%20");

        //Puts web address into browser.

        window.location.href = encodedURLString;

    }

});

<!DOCTYPE html>

<html lang="en">    

	<!-- Includes the CDN for the autcomplete functionality.-->  

	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/js/autoComplete.min.js"></script>

	<!-- Includes JQuery -->

    <script

			  src="https://code.jquery.com/jquery-3.4.1.js"

			  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="

			  crossorigin="anonymous">

	</script>

	<!-- Declares the stylesheet for the page.-->

	<link rel="stylesheet" href="cssBeingUsed.css">

	<!-- Gets the autcomplete.js library for use (Doesn't look like I need this, keeping it for now just in case).

	<script src="./autoComplete.js/dist/js/autoComplete.js"></script> -->

	<!--Link to demo stylesheet, keeping for now in case I need it.

		<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.min.css">

	</head>-->

	<!-- Declares id of input field which will be used for the autcomplete.-->

	<input id="autoComplete" tabindex="1"></input>  <!-- Default "id" value = "autoComplete"> -->

	<body>

	<!-- Gets the other autocomplete file library for use (Doesn't look like I need this, keeping it for now just in case).

	<script src="./autoComplete.js/dist/js/autoComplete.min.js"></script> -->

	<!-- Gets require.js for use in autcomplete.-->

	<script src="./require.js"></script>

	<script>  

	//Declares global variable name array.

	var nameArray = [];      

	//Pushs data onto nameArray variable.

	function loadGeoJson(data) {

	//Sets index to 0.

	var index = 0;

	//While the feature at the current index is not null.

    while (data.features[index] != null){

		//Log the feature name.

		console.log(data.features[index].name);

		//Push the json object at the current index onto nameArray.

		nameArray.push(data.features[index]);

		//Increment index.

        index++;

         }

	}

	//Ajax call to WFS server with the features/data need.

	$.ajax({

		//URL of WFS server.

		url: "https://astrocloud.wr.usgs.gov/dataset/data/nomenclature/MARS/WFS?version=1.1.0.0&service=WFS&request=GetFeature&srsname=EPSG4326&outputFormat=application/json",

		//Data type of file on WFS server/above URL.

		dataType: 'json',

		//When the server is successfully connect to, run loadGeoJson function.

		success: loadGeoJson,

		//Timeout on connection to server (WILL NEED TO LOWER WHEN NEW SERVER IS AVAILABLE).

		timeout : 320000

		});

	</script>

	<!-- Declares main js file for autocomplete functionality.-->

	<script src="./customIndex.js"></script>

</body>

</html>

 No newline at end of file

{

  "lockfileVersion": 1

}