bootstrap-typeahead 相关问题

Twitter Bootstrap的自动完成功能

Bootstrap typeahead 无法在 Bootstrap Modal 内工作

我正在使用 codeigniter 框架，我正在使用 bootstrap typeahead，一切都很好，但我的问题是当我将其放入 bootstrap 模式时，bootstrap typeahead 将无法工作。有人可以吗...

twitter-bootstrap bootstrap-typeahead

回答 6 投票 0

下拉菜单的 Typeahead 实现

我正在为下拉菜单创建预输入。我使用了 angularjs-typeahead-dropdown.min 。但它不起作用。下面是我的代码 ...

angularjs typeahead.js bootstrap-typeahead twitter-typeahead angular-ui-typeahead

回答 3 投票 0

无法在 ngx-bootstrap typeahead 中设置初始值

你好，我正在使用 Angular 16 "ngx-bootstrap": "^11.0.2", 我无法设置默认值意味着当用户从建议性搜索中选择数据并且我已将该值保存在数据库中并且...

angular typescript bootstrap-5 ngx-bootstrap bootstrap-typeahead

回答 1 投票 0

Bootstrap4：自动完成预先输入搜索，使用ajax调用故障排除

我正在尝试使用文本输入作为搜索框，使用 bootstrap typeahead 插件通过 ajax 调用检索搜索结果我正在尝试使用文本输入作为搜索框，使用 bootstrap typeahead 插件通过 ajax 调用检索搜索结果 <form class="form-inline ml-3" action="/phone-autocomplete/"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off" id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> </div> </div> </form> 我的数据源返回如下文本/xml 响应： [ "9876124", "9812124","9875124",] 我的javascript，包含所有必需的包后，如下： $('#phone-autocomplete').typeahead({ source: function (query, process) { return $.get('/phone-autocomplete/', { searchstring: query }, function (data) { console.log(data); return process(data); }); }, 'updater' : function(item) { this.$element[0].value = item; console.log(item); this.$element[0].form.submit(); return item; } }); </script> 目的是让搜索输入在用户每次键入字符时发送请求，并返回更新的项目列表我遇到的问题是它只适用于一位数字，然后由于某种原因停止显示这是使用 bootstrap3-typeahead.min.js 包谢谢您的 Ajax 调用一定有问题，因为 typeahead 似乎在搜索框中输入的每个字符都会更新，请参阅演示： // $('#phone-autocomplete').typeahead({ source: function(query, process) { data = ["9876124", "9812124", "9875124", ]; console.log(`Ajax call with query: ${query}`); return process(data); }, 'updater': function(item) { this.$element[0].value = item; console.log(item); this.$element[0].form.submit(); return item; } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <form class="form-inline ml-3" action="/phone-autocomplete/"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off" id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> </div> </div> </form>

jquery ajax twitter-bootstrap bootstrap-4 bootstrap-typeahead

回答 1 投票 0

以 Laravel 5.1 格式重新编写纯 PHP 代码

我有这个代码在纯 PHP 中运行，我想在 Laravel 5.1 中编写它，因为我使用 Laravel 进行开发。我有这个代码在纯 PHP 中运行，我想在 Laravel 5.1 中编写它，因为我使用 Laravel 进行开发。 <?php if(isset($_POST['query'])){ mysql_connect('localhost', 'root', ''); mysql_select_db('tradersmart'); $query = $_POST['query']; $sql = mysql_query("SELECT name, timezone_id FROM geonames_names WHERE name LIKE '%{$query}%'"); $arrayName = array(); $arrayTimezone = array(); while($row = mysql_fetch_assoc($sql)){ $arrayName[] = $row['timezone_id']; $arrayTimezone[] = $row['name']; } echo json_encode($arrayName +$arrayTimezone); } ?> 这是 HTML 文件：它使用 JSON 和 typeahead 来加快建议速度。 <body> <div class="well"> <input type="text" class="css-input" id="typeahead" data-provider="typeahead"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script> $(function(){ $('#typeahead').typeahead({ source: function(query, process){ $.ajax({ url: 'http://localhost:2222/bootstrap/source.php', type: 'POST', data: 'query=' +query, dataType: 'JSON', async: true, success: function(data){ process(data); } }); } }); }); </script> </body> 既然你要求用 Laravel 的方式来做事，那么只需几个步骤就可以完成这件事。简而言之，您需要 1) 创建一个模型，2) 更新您的 routes.php 文件，3) 创建一个控制器，以及 (4) 更新您的 ajax 调用以反映 Laravel 的路由约定。我建议使用命令行 php artisan 命令来创建模型和控制器，因为它们会将必要的文件放置在正确的路径中，以便 Laravel 会为您自动加载它们。模型 - 从命令行运行 php artisan make:model GeoName，这应该在 app/GeoName.php 创建一个模型，您需要在其中更改表名以反映您的客户名称。 <? namespace App; use Illuminate\Database\Eloquent\Model; class GeoName extends Model { // this will map your custom table name to laravel. protected $table = "geonames_names"; } Laravel 会自动期望表名是模型的复数版本，在这种情况下它将查找 geonames，要覆盖您需要添加上面的 protected $table 属性。更新 app/Http/routes.php 文件以捕获 AJAX post 请求。 Route::post('bootstrap/source','GeoNameController@ajaxQuery'); 这将捕获对 POST 的 http://localhost:2222/bootstrap/cache 请求，这里的 Laravel 路线文档中有更多内容。在命令行中使用 php artisan make:Controller GeoNameController --plain 创建控制器。这里使用 Plain 来停止索引、创建、编辑、显示、更新和删除等典型 CRUD 请求类型的自动搭建。这将创建文件app/Http/Controllers/GeoNameController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; class GeoNameControler extends Controller { // Add the following here public function ajaxQuery(Request $request){ $query = $request->get('query'); $geoNames = GeoName::where('name',$query)->lists('name','timezone_id')->get(); return $geoNames; } } 请记住，query用于$query = $request->get('query');中，因为这是您在ajax请求中命名数据变量的名称。 (data: 'query=' +query,) 最后，在 jQuery ajax 请求中删除请求调用中的 .php。 url: 'http://localhost:2222/bootstrap/source' 因为你永远不会直接在 Laravel 中调用文件，所以路由文件会处理你的应用程序的所有目的地。需要注意的一些事项，(1) 您的数据库应使用 .env and app/config.php 文件进行配置，(2) Laravel 将自动检测 jQuery ajax 函数是否需要 JSON 响应，因此 Laravel 将准确提供其所要求的内容为了。您可能会遇到 XSFR 令牌权限问题，您可以在此处的 Laravel 文档中了解如何解决该问题。如果您还不知道，Laravel 的主文档非常棒！当然，关于使用 Laravel 以及许多优秀的 Laravel 资源还有很多东西需要学习。祝你好运！

php arrays json html bootstrap-typeahead

回答 1 投票 0

我如何在前端使用名称并在选定时发送 id

<input *ngIf="showAutoComplete" [(ngModel)]="selected" [typeahead]="uniqueCreatedBys" [typeaheadOptionField]="'name'" class="form-control" (ngModelChange)= "ObjectType('',userId = selected.id )"> 我正在使用 ngx bootstarp 的 typehead，需要在前端部分访问名称，但在 ObjectType 函数中发送 id，我的 uniqueCreatedBys 包含名称和 id 的列表 //这是我的功能 ObjectType(q?: string, userId? : number, offset?: number, limit?: number) { // console.log(this.objectTypes) // const userId = this.selected ? this.objectTypes.find(obj => obj.createdBy === this.selected)?.createdById : undefined; this.objectTypeService.fetchObjectTypes(q, userId , offset, limit).subscribe((response: any) => { this.objectTypeService.resetObjectTypes(); this.objectTypeService.setObjectTypes(response); this.objectTypes = this.objectTypeService.getObjectTypes(); this.totalCount = this.objectTypeService.getTotalDocsCount(); this.uniqueCreatedBys = this.getUniqueCreatedBys(this.objectTypes); console.log(this.uniqueCreatedBys) }); } 而不是 ngModelChange 您可以使用 onSelect 之类的东西 <input *ngIf="showAutoComplete" [(ngModel)]="selected" [typeahead]="uniqueCreatedBys" [typeaheadOptionField]="'name'" class="form-control" (typeaheadOnSelect)= "ObjectType('',selected?.id )"> 工作演示

angular development-environment bootstrap-typeahead

回答 1 投票 0

Typeahead的工作原理是用全英文字母书写的源码，但当与一个变量相关联时就不行了。

为什么当我用全称写源码时，我的typeahead可以工作，但当我把它与一个变量关联时就不行了？它的工作原理是： var dt = [{"name": "Coop", "link": "post.php?d=1"},{"name": "...

javascript typeahead.js typeahead bootstrap-typeahead bloodhound

回答 1 投票 0

Angular ngbTypeahead 不重置模糊时的输入值。

我在使用Angular2+的bootstrap ngbTypeahead，我想在失去焦点且没有选择项目时清理输入。但是，当typeahead显示选项选择时，该值并没有清除，......

angular bootstrap-4 ng-bootstrap bootstrap-typeahead

回答 1 投票 0

如何使用React bootstrap typeahead清除函数中的输入

我正在尝试使用以下代码清除函数中的输入。从'react-bootstrap-typeahead'导入{Typeahead}；类型requestState = {value：string []}类数据扩展组件

reactjs bootstrap-typeahead react-bootstrap-typeahead

回答 1 投票 0

typeahead.js onselect项重定向到新窗口

我正在使用带有json响应的远程URL（New typeahead.js）我的javascript：$（document）.ready（function（）{$（'input.country'）。typeahead（{valueKey：'name'，remote： {url：'example.in/d.php?query =％...

jquery bootstrap-typeahead typeahead typeahead.js

回答 4 投票 5

ng bootstrap typeahead not work with angular react form

这是我的组件文件从'@ ng-bootstrap / ng-bootstrap'导入{NgbTypeahead}；从'rxjs / operators'导入{map，switchMap，finalize，debounceTime，uniqueUntilChanged，filter};导入{...

angular angular-reactive-forms ng-bootstrap bootstrap-typeahead

回答 1 投票 0

在Typeahead中，无法订阅服务以获取要绑定到预先搜索的数据

我正在使用ngbootstrap typeahead（https://ng-bootstrap.github.io/#/components/typeahead/examples#http），如上所述，我们需要将observable返回到[ngbTypeahead] =“search”。 ..

angular angular6 typeahead bootstrap-typeahead

回答 1 投票 0

asp.net Webforms中的Bootstrap Typeahead

我正在寻找一个很好的例子，我可以用asp.net Webforms应用程序实现Bootstrap Typeahead。该应用程序已经使用Bootstrap主题和各种插件。现在我希望用户......