csharp 使用Typeahead与Asp.net MVC进行自动完成

Posted 2021-05-12

    <div id="remote" class="col-md-10 well">
        <input type="text" name="text" id="text" placeholder="text" class="text typeahead" />
    </div>

    <script src="~/Scripts/typeahead.bundle.js"></script>

    <script type="text/javascript">
        $(function() {
            var bestPictures = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: '/Home/testdata?query=%QUERY',

            });

            bestPictures.initialize();

            $('#remote .typeahead').typeahead(null, {
                name: 'best-pictures',
                displayKey: 'Value',
                minLength: 3,
                source: bestPictures.ttAdapter()
            });

            $('#remote .typeahead').on('typeahead:selected', function(event, suggestion, datasetName) {
                console.log(suggestion);
            });
        });
    </script>

    public class HomeController : Controller
    {
        public JsonResult TestData(string query)
        {

            var data = new DummyData[]
            {
                new DummyData {Value = "Alabama"}, new DummyData {Value = "Alaska"}, new DummyData {Value = "Arizona"}, new DummyData {Value = "Arkansas"},
                new DummyData {Value = "California"},
                new DummyData {Value = "Colorado"}, new DummyData {Value = "Connecticut"}, new DummyData {Value = "Delaware"}, new DummyData {Value = "Florida"},
                new DummyData {Value = "Georgia"}, new DummyData {Value = "Hawaii"},
                new DummyData {Value = "Idaho"}, new DummyData {Value = "Illinois"}, new DummyData {Value = "Indiana"}, new DummyData {Value = "Iowa"},
                new DummyData {Value = "Kansas"}, new DummyData {Value = "Kentucky"}, new DummyData {Value = "Louisiana"},
                new DummyData {Value = "Maine"}, new DummyData {Value = "Maryland"}, new DummyData {Value = "Massachusetts"}, new DummyData {Value = "Michigan"},
                new DummyData {Value = "Minnesota"},
                new DummyData {Value = "Mississippi"}, new DummyData {Value = "Missouri"}, new DummyData {Value = "Montana"}, new DummyData {Value = "Nebraska"},
                new DummyData {Value = "Nevada"}, new DummyData {Value = "new DummyData Hampshire"},
                new DummyData {Value = "new DummyData Jersey"}, new DummyData {Value = "new DummyData Mexico"}, new DummyData {Value = "new DummyData York"},
                new DummyData {Value = "North Carolina"}, new DummyData {Value = "North Dakota"},
                new DummyData {Value = "Ohio"}, new DummyData {Value = "Oklahoma"}, new DummyData {Value = "Oregon"}, new DummyData {Value = "Pennsylvania"},
                new DummyData {Value = "Rhode Island"},
                new DummyData {Value = "South Carolina"}, new DummyData {Value = "South Dakota"}, new DummyData {Value = "Tennessee"},
                new DummyData {Value = "Texas"}, new DummyData {Value = "Utah"}, new DummyData {Value = "Vermont"},
                new DummyData {Value = "Virginia"}, new DummyData {Value = "Washington"}, new DummyData {Value = "West Virginia"},
                new DummyData {Value = "Wisconsin"}, new DummyData {Value = "Wyoming"}
            };
            return Json( data.Where(d => d.Value.Contains(query)) , JsonRequestBehavior.AllowGet);
        }

        public class DummyData
        {
            public string Value { get; set; }
            public string FullName { get { return Value + " is Full Name"; } }
        }

      }