Question

<!--Search Bar-->
    <div class="dropdown" style=margin-left:500px;margin-top:-40px>
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown_coins" data-toggle="dropdown" >
         Set Location
        </button>
        <div  class="dropdown-menu" style=margin-top:20px>
            
                <input type="search" class="form-control" id='locName' placeholder="Search Location" style=margin-top:-60px>
            </form>
           
        </div>
    </div>
    <!--AutoComplete Search bar-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    $(function() {
        $("#locName").autocomplete({
            source: [
                "Adugodi",
                "Arekere",
                "Attiguppe",
                "Yelahanka"
    
            ],
            minLength: 1,
            function(event) {
                var value = event.getAttribute('value')
                var locName = document.getElementById("locName").value;
                if (value.includes('&')) {
                    value = value.replace("&", "%26");
                }
                if (locName == "") {
                    alert("Please Select your Location");
                } else {
                    window.location = "http://www.example.com
                }
                return false;
            }
    
        });
    });
    </script>

我已经在我的网站中实现了自动完成搜索栏。单击下拉按钮时，我的输入搜索字段将出现在该用户可以输入数据中。输入位置后，我的下拉按钮应反映与我输入的数据相同的数据输入文本字段，但在这里我的下拉按钮再次显示选择位置。请帮助我摆脱这个字段的新知识

Answer 1

有一些语法错误-标记缺失。没有引号和;在example.com之后。我无法理解自动完成功能中的价值部分，它也给出了错误。因此，我对此进行了评论。休息正在工作。希望对您有所帮助。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
             setLocation();
         });

            var cities = [
                "Adugodi",
                "Arekere",
                "Attiguppe",
                "Yelahanka"
            ];             

         function setLocation() {
            $( "#locName" ).autocomplete({
               source: cities,
               minLength: 1,
               autoFocus:true,
            select: function(event, ui) {
                //var value = event.getAttribute('value');
                var locName = document.getElementById("locName").value;
                //if (value.includes('&')) {
                //    value = value.replace("&", "%26");
                //}
                console.log( ui.item.label);
                if (locName === "") {
                    alert("Please Select your Location");
                } else {
                    document.getElementById("locName").value = ui.item.label;
                    document.getElementById("dropdown_coins").innerHTML =  "Set Location - " + ui.item.label;

                    window.location = "http://www.example.com";
                }
                return false;

            }
            });                 
         }

         function checkLocation() {
            var locName = document.getElementById("locName").value;  
            if (locName === "") {
                alert("Please Select your Location");
                document.getElementById("locName").focus();
            } else {
                var n = cities.includes(locName);
                if(!n) {
                    alert("Sorry! No such location. Please select location.");
                    document.getElementById("locName").value = "";
                    document.getElementById("dropdown_coins").innerHTML =  " Set Location ";
                    document.getElementById("locName").focus();
                }
                setLocation();
            }
         }
      </script>
   </head>

   <body>
      <!-- HTML --> 
    <div class="dropdown" style=margin-left:500px;margin-top:40px>
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown_coins" data-toggle="dropdown" onclick="checkLocation();" >Set Location</button>
        <div  class="dropdown-menu" style=margin-top:20px>
            <form>
                <input type="search" class="form-control" id='locName' placeholder="Search Location" style=margin-top:-60px>
            </form>

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

我有这样的代码：我的下拉按钮应该反映我在输入文本字段中输入的数据

1 个答案: