Commit a5d00ec6 authored by Scott Ames's avatar Scott Ames
Browse files

updated autocompelte

parent 847b0fb4

app/src/index.html

+9 −0
Original line number Diff line number Diff line
@@ -9,5 +9,14 @@ 
    <title>CartoCosmos</title>

</head>

<body>

<script>

function unrenderBox(){

    document.getElementById("#autoComplete_list").style.visibility = "hidden";

}

function renderBox(){

    document.getElementById("#autoComplete_list").style.visibility = "visible";

}

</script>

<input id="autoComplete" tabindex="1" onfocusout="unrenderBox()" onfocusin="renderBox()"></input>

    <div id="map"></div>

</body>

app/src/js/autocomplete/customIndex.js

+3 −2
Original line number Diff line number Diff line 
import "./getServer.js";

import "jquery";

import "./render";

import "./require";

import autoComplete from "@tarekraafat/autocomplete.js";



// Logs query events into the console.
@@ -50,7 +51,7 @@ var newAutoComplete = new autoComplete({ 
    return 0;

  },

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

  //placeHolder: "Enter feature here...",

  placeHolder: "Enter feature here...",

  //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.

app/src/styles.css

+80 −0
Original line number Diff line number Diff line
@@ -19,3 +19,83 @@ Controls the CSS for projection buttons when there is no available projection 
.disabled {

  opacity: 40%;

}



#autoComplete {

  border-style: solid;

  border-width: 2px;

  color: #000000;

  height: 21px;

  width: 150px;

  font-size: 1.2em;

  left: 40px;

  top: 14px;

  position: relative;

}



#autoComplete_list {

  position: relative;

  padding: 0;

  left: 0;

  right: 0;

  margin-top: 0;

  margin-left: auto;

  margin-right: auto;

  width: 18rem;

  transition: all 0.1s ease-in-out;

  -webkit-transition: all -webkit-transform 0.1s ease;

}

.autoComplete_result {

  /*display: inline-block;*/ /*margin:0rem auto;padding:.6rem;*/ /*SAME WIDTH AS TEXTBOX*/

  max-width: 150px; /*RESTYLE, OUTSIDE BORDER OF LIST*/

  border: 0.05rem solid #e3e3e3; /*NO BULLETS*/

  list-style: none; /*text-align:left;*/

  font-size: 1.1rem;

  color: #7b7b7b;

  transition: all 0.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, 0.9);

  border-left: 2px solid rgb(0, 0, 0);

  border-right: 2px solid rgb(0, 0, 0);

  border-top: 2px solid transparent;

  border-bottom: 2px solid transparent;

}

.autoComplete_result:focus {

  outline: 0;

  background-color: rgba(255, 248, 248, 0.9);

  border-left: 2px solid rgb(0, 0, 0);

  border-right: 2px solid rgb(0, 0, 0);

  border-top: 2px solid transparent;

  border-bottom: 2px solid transparent;

}

.autoComplete_highlighted {

  opacity: 1;

  color: rgb(0, 0, 0);

  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, 0.9);

  border-left: 2px solid rgb(0, 0, 0);

  border-right: 2px solid rgb(0, 0, 0);

  border-top: 2px solid transparent;

  border-bottom: 2px solid transparent;

}

@media only screen and (max-width: 600px) {

  #autoComplete {

    width: 5rem;

  }

}