我已在我的应用中为邮政编码实施了自动填充功能.我在Firebug中进行调试,我在控制台中看到操作正在执行,我在结果列表中得到了一个邮政编码列表,但是当我调试时,实际列表没有显示.
这是我的Customers控制器中的操作:
//the autocomplete request sends a parameter 'term' that contains the filter
public ActionResult FindZipCode(string term)
{
string[] zipCodes = customerRepository.FindFilteredZipCodes(term);
//return raw text, one result on each line
return Content(string.Join("\n", zipCodes));
}
Run Code Online (Sandbox Code Playgroud)
这是标记(缩写)
<% using (Html.BeginForm("Create", "Customers")) {%>
<input type="text" value="" name="ZipCodeID" id="ZipCodeID" />
<% } %>
Run Code Online (Sandbox Code Playgroud)
这是我加载脚本的顺序:
<script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ZipCodeID").autocomplete({ source: '<%= Url.Action("FindZipCode", "Customers") %>'});
});
</script>
Run Code Online (Sandbox Code Playgroud)
有什么明显我错过了吗?就像我说脚本正在抓取邮政编码列表一样,我测试时它们不会显示在我的页面上.
编辑:我添加了一个图像,显示我在firebug中看到的内容 - …
我正在使用JSP创建一个Web项目,并尝试使用jquery自动完成功能从我的数据库中实现对用户的简单搜索,但是我无法理解它是如何工作的.我对jquery和ajax几乎没有任何了解只是为了让你知道.我已经完成了以下代码并且卡住了.
<%@page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,ewa.sendEmail,ewa.pwGen,ewa.hashPw,java.sql.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script src="js/jquery.autocomplete.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<input type="text" id="search" name="search"/>
<script>
$("#search").autocomplete("getdata.jsp");
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
getdata.jsp
<%@page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,java.sql.*" %>
<%! dbConnect db = new dbConnect(); %>
<%
String query = request.getParameter("q");
db.connect();
Statement stmt = db.getConnection().createStatement();
ResultSet rs = stmt.executeQuery("SELECT username FROM created_accounts WHERE username LIKE "+query);
while(rs.next())
{
out.println(rs.getString("username")); …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用jquery ui插件实现自动完成组合框.
使用下面提到的代码我能够实现自动完成部分但不能实现下拉部分(由于未被捕获的类型错误,下拉箭头不可见)
$.widget( "ui.combobox", {
_create: function() {
var input,
self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $( "<span>" )
.addClass( "ui-combobox" )
.insertAfter( select );
input = $( "<input>" )
.appendTo( wrapper )
.val( value )
.addClass( "ui-state-default ui-combobox-input" )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( select.children( …Run Code Online (Sandbox Code Playgroud) 我目前有一个PHP函数(codeigniter),它接受一个查询字符串(来自post),并返回相关的MySQL行,如下所示:
$term = $this->input->post("query");
$rows = $this->db->query("SELECT id, title as 'desc' , abbreviation , etc FROM shows WHERE abbreviation LIKE '%".$term."%' OR title LIKE '%".$term."%' OR etc LIKE '%".$term."%' LIMIT 10; ")->result_array();
Run Code Online (Sandbox Code Playgroud)
这是有效的,但让我说我的表是这样的:
id title abbreviation
-- ---------------------- ------------
1 The Big Bang Theory TBBT
2 How I Met Your Mother HMYM
3 a show called tbbt hmym ASCTM
Run Code Online (Sandbox Code Playgroud)
现在,当用户搜索时tbbt,它首先返回第3行.但我希望缩写是"主要"参数.
因此,如果缩写匹配,请先返回,然后查找标题列.
我想我可以用PHP来做,像这样:
// pseudo-code :
$abbreviation_matches = result("bla bla WHERE abbreviation LIKE term AND NOT title like term"); …Run Code Online (Sandbox Code Playgroud) 我正在运行rails 4应用程序,并安装了jquery geocomplete插件的v1.6,以提供谷歌地方自动完成功能.
我按照geocomplete github页面上的说明进行操作(http://ubilabs.github.io/geocomplete/)
该插件在我的本地主机上运行时效果很好,但是当我将我的应用程序上传到heroku时,自动完成简单功能不起作用 - 谷歌地图不会显示,并且在自动填充文本字段中输入不会触发任何响应.此外,页面上没有其他JavaScript工作.
这些是我在视图文件中运行的脚本:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
这些是我在application.js文件中需要的文件
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery.turbolinks
//= require jquery.geocomplete
//= require jquery.geocomplete.min
//= require underscore
//= require gmaps/google
//= require_tree .
Run Code Online (Sandbox Code Playgroud)
这是heroku中页面顶部的html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link data-turbolinks-track="true" href="/assets/application-2b5264bcc7a1f63268dbbba57c51fade.css" media="all" …Run Code Online (Sandbox Code Playgroud) google-maps ruby-on-rails jquery-autocomplete google-places-api
如果我删除第一行(alert()),以下代码将不起作用,而且很明显我不需要它.我绑定事件的表单是使用jquery动态生成的.请问可能是什么问题?谢谢.
alert("");
$("#search").autocomplete('func.php');
$("#c_name").autocomplete('func.php');
$("#search").keypress(function(event) {
if (event.which === 13) {
findItem('search');
return false;
}
});
Run Code Online (Sandbox Code Playgroud) 我有这个代码,自动完成,但显然我做错了,因为它不工作.
这是我的看法:
@Html.EditorFor(model => model.city)<br />
@Html.ValidationMessageFor(model => model.city)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type="text/javascript"></script>
<script src='<%: Url.Content("~/Scripts/jQueryUI/jquery-ui-1.8.2.custom.min.js") %>'
type="text/javascript"></script>
<script type="text/javascript">
$("#city").autocomplete({
source: '<%: Url.Action("Location", "CityList") %>'
});
</script>
Run Code Online (Sandbox Code Playgroud)
这是我的控制器:
public class LocationController : Controller
{
private pEntities db = new pEntities();
public ActionResult CityList(string city)
{
var results = from c in db.CityCodes
where c.city.StartsWith(city)
select new { label = c.city, id = c.city_id };
return Json(results.ToArray(), JsonRequestBehavior.AllowGet);
}
Run Code Online (Sandbox Code Playgroud) 尝试先.getJSON使用该数据成为我的自动完成源,继承人代码..这不起作用,我在这里做错了什么?
$.getJSON(url, function(data) {
//autocomplete
$(document).ready(function(){
$( "#name" ).autocomplete({
minLength: 2,
source: data
})
});
});
Run Code Online (Sandbox Code Playgroud)
我知道我可以做,source: url但我不想多次调用jSON数据.
尝试使用rails3-jquery-autocomplete时遇到以下错误:
最初,我使用了最新版本的jquery-rails,但读到他们删除了jquery-ui.我已经尝试将jquery-rails降级为gem'jquery-rails','〜> 2.3.0',如本答案中所建议的那样,但它没有用.rails active admin deployment:找不到文件'jquery-ui'
我也尝试重新启动我的服务器,因为建议这个答案但是也没有用.资产管道找不到JS文件
我非常感谢有关如何使用没有gem的jQuery mobile在rails 4中执行此操作的解释,因为我不知道并且找不到任何最近的资源.
couldn't find file 'autocomplete-rails'
Run Code Online (Sandbox Code Playgroud)
的application.js
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
//= require jquery.mobile
//= require turbolinks
//= require_tree .
Run Code Online (Sandbox Code Playgroud)
的Gemfile
gem 'rails', '4.0.0'
gem 'jquery-rails'
gem 'jquery_mobile_rails'
gem 'jquery-ui-rails'
gem 'rails3-jquery-autocomplete'
Run Code Online (Sandbox Code Playgroud) 我正在使用 Jquery UI 的自动完成功能。
我遇到的问题是:当我使用外部数据源时,标签和值都表现得像值。
换句话说,当我使用单个标签和值对引用外部数据源时,标签和值作为两个选项一起出现在下拉列表中。
换句话说,它们都显示为值,而不是显示为标签和值。
当您单击其中任何一个时,警报 alert(ui.item.label); 显示其值,无论是标签还是值。
我不明白为什么标签和值都表现得像值,特别是因为我已经在 json 源代码中清楚地标记了它。
该问题不会发生在本地数据源上,而只会发生在外部数据源上。
这是本地代码:
<script>
$(document).ready(function() {
$("#inputbox").autocomplete({
source: "sd/aa.php",
minLength: 3,
select: function(event, ui) {
alert(ui.item.label);
alert(ui.item.value);
}
});
});
</script>
<input id="inputbox" />
Run Code Online (Sandbox Code Playgroud) jquery ×6
javascript ×4
asp.net-mvc ×2
c# ×2
jquery-ui ×2
autocomplete ×1
codeigniter ×1
google-maps ×1
java ×1
mysql ×1
php ×1
sql ×1